我有一只小松鼠 2019-06-27
gulp
作为一个自动化构建工具,在前端开发中大大的提高了开发效率,前端开发者们可以利用他减少许多繁复无脑的操作。
这里简单构建一个小环境,就可以在以后的学习中,直接新建各种test.html测试我们新学习的知识点啦~
【看不明白的,有疏漏的,欢迎指出,我更改措辞或者bug】
入门就不讲了,会用npm
的同学应该都清楚,这里贴一个既有的官方指南。gulp入门指南
详细的配置我就不讲了,api文档戳进去看。简单做点通俗的讲解。
gulp是由每个小task组成的,我们可以类似函数一样,把我们需要的一个个小功能以各种task分开写,然后可以在cmd
里使用gulp <task> <othertask>
方式来执行。
当然任务多了,我们就需要一键执行所有操作,所以一般情况下,我们只运行 gulp
命令,则会执行所注册的名为 default 的 task,然后在default这个任务后面,添加我们写好的其它task名的数组,则会挨个执行我们写好的各种task。不然只执行function。
如果没有default
这个 task,那么gulp
命令会报错。
gulp.task('default', function() { // 将你的默认的任务代码放在这 });
注意: 默认的,task 将以最大的并发数执行,也就是说,gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列,并以特定的顺序执行,嗯,戳文档api文档。
其实说白了就是匹配我们要处理的文件,src就是路径。
gulp.src('client/templates/*.jade')
*
自然是表示任意,全部。glob
请参考 node-glob
语法 或者,你也可以直接写文件的路径。
其实就是把src匹配到的文件传递到后面来执行。括号里就是我们要进行的各种操作。
有点类似js语法,不难理解,用.
接起来,一步步执行。
一般我们会一行行写,可读性好点,写一行不友好。
gulp.src('client/templates/*.jade') .pipe(jade()) .pipe(minify()) .pipe(gulp.dest('build/minified_templates'));
生成处理好的文件。
你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。
gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./build/templates')) .pipe(minify()) .pipe(gulp.dest('./build/minified_templates'));
监视文件,并且可以在文件发生改动时候做一些事情。
gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字,
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']); watcher.on('change', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });
也可以直接执行function,一样的。
gulp.watch('js/**/*.js', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });
gulp的很多操作都是用插件执行的,当然,详细操作自然是每个插件看作者文档了!而且同一个功能的插件也层出不穷,大家可以根据需要自行选择。好了,开始我们的构建,注意,提到的每一个插件都要npm安装
注意:每一个插件都存在可配置的空间,所以关于最大化利用好每个插件,也是参照文档来的,这里我们取一些通用配置,具体视项目情况而定。
无可厚非,代码实时保存,浏览器实时刷新,是前端最想要的功能,手动刷新浏览器相信是每一个前端新手要吐的操作。
采用gulp-connect插件。
根目录下开启服务,端口号为2323,开启实时刷新,局域网内可用。
var connect = require('gulp-connect'); var serverConfig = { root: "./", port: 2323, livereload: true, host: '::' } gulp.task('server',function(){ connect.server(serverConfig); });
采用gulp-livereload。
开启刷新,监听html变化,并实时刷新。
var livereload = require('gulp-livereload') gulp.task('watch', function () { livereload.listen(); gulp.watch(['*.html'],function(event){ livereload.changed(event.path); }) });
其实到这里,一个微型的服务就搭建起来了,最后别忘了最根本的一句
var gulp = require('gulp');
不然是起不来的。
为了简便,可以在gulpfiles.js里添加一行,
gulp.task('default',['server','watch']);
直接运行gulp
就好,让他们依次执行。
到这里,其实就是一个小规模的调试环境,接下来,让我们升级一下,开始构造简单的发布环境
采用的是gulp-htmlmin插件。
抽取src目录下的所有html文件,导入到htmlmin插件进行处理,并将结果输出到public目录,最后重新刷新已开启的服务。
var htmlmin = require('gulp-htmlmin'); gulp.task('html', function(){ gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true, removeComments: true })) .pipe(gulp.dest('public')) .pipe(connect.reload()); });
采用的是gulp-uglify插件,但同时,我们也用到了另一个插件gulp-concat,这个是用来连接各个文件组成一个文件。
抽取src/js下的所有js文件,将其合并,然后压缩,输出到public/js目录,最后服务重载。
var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); gulp.task('script',function(){ gulp.src('src/js/*.js') .pipe(concat('main.js')) .pipe(uglify({mangle:false})) .pipe(gulp.dest('public/js')) .pipe(connect.reload()); });
采用的是gulp-cssnano插件。类似js,不解释了。
var cssnano = require('gulp-cssnano'); gulp.task('css',function(){ gulp.src('src/css/*.css') .pipe(concat('animate.css')) .pipe(cssnano()) .pipe(gulp.dest('public/css')) .pipe(connect.reload()); })
采取的是gulp-smushit插件,类似js,不解释。
var smushit = require('gulp-smushit'); gulp.task('imagemin',function(){ gulp.src(['src/images/*.png','src/images/*.jpg']) .pipe(smushit({ verbose:true })) .pipe(gulp.dest('public/images')) .pipe(connect.reload()); });
这个gulp-watch在前面有讲到,其实就是开启监听,并重新执行各个html
,js,css,imagemin压缩任务。
相信大家对比前面的gulp-livereload能够看的出来,这里两者是有冲突的,一个只是调试下刷新页面,一个却每次都要压缩。
所以其实实际项目中是不会把压缩任务配置到watch里,会造成资源浪费,你每保存一次,就会压缩。只会在最后调试完成,执行压缩一次。
gulp.task('watch', function () { gulp.watch(['src/*.html'], ['html']); gulp.watch(['src/js/*.js'], ['script']); gulp.watch(['src/css/*.css'], ['css']); gulp.watch(['src/images/*.*'], ['imagemin']); });
做一个min的task就好,只需要gulp min
。
gulp.task('min',['html','script','css','imagemin']);