在次浅谈gulp前端自动化构建工具
2017-03-28 11:46
513 查看
在次浅谈gulp前端自动化构建工具
~~~~(>_<)~~~~前几天写了一个gulp总结,偶然之间发现了阮大神写的gulp教程,顿时,感觉自己写的就是渣渣啊!所以,今天学习下阮大大的教程,对于上一篇gulp文章深深的自责,侮辱了各位看官的眼,表示深深的自责。gulp是一个自动化的任务运行工具,会按照我们预先设定的顺序自动执行一系列的任务,这样可以提高我们的工作效率,尤其是在这个以时间换金钱的时代。(*^__^*) 嘻嘻……
1.安装
gulp基于node平台,所以首先需要安装node环境,安装完node环境之后,可以执行下面的命令。npm install -g gulp npm install --save-dev gulp
安装gulp之外,还需要安装gulp的插件模块,下面以安装gulp-uglify模块为演示。
执行下面的命令
npm install --save-dev gulp-uglify
2.gulpfile.js
在项目的根目录下创建gulpfile.js文件。var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task('minify', function () { gulp.src('js/app.js') .pipe(uglify()) .pipe(gulp.dest('build')) });
上面代码中,gulpfile.js加载gulp和gulp-uglify模块之后,使用gulp模块的task方法指定任务minify。task方法有两个参数,第一个是任务名,第二个是任务函数。在任务函数中,使用gulp模块的src方法,指定所要处理的文件,然后使用pipe方法,将上一步的输出转为当前的输入,进行链式处理。
task方法的回调函数使用了两次pipe方法,也就是说做了两种处理。第一种处理是使用gulp-uglify模块,压缩源码;第二种处理是使用gulp模块的dest方法,将上一步的输出写入本地文件,这里是build.js(代码中省略了后缀名js)。
执行minify任务时,就在项目目录中执行下面命令就可以了。
gulp minify
3.gulp模块的方法
3.1src()
gulp模块的src方法,用于产生数据流。它的参数表示所要处理的文件,这些指定的文件会转换成数据流。参数的写法一般有以下几种形式。js/app.js:指定确切的文件名。
js/*.js:某个目录所有后缀名为js的文件。
js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件。
!js/app.js:除了js/app.js以外的所有文件。
*.+(js css):匹配项目根目录下,所有后缀名为js或css的文件。
src方法的参数还可以是一个数组,用来指定多个成员。
gulp.src(['js/**/*.js', '!js/**/*.min.js'])
3.2dest()
dest方法将管道的输出写入文件,同时将这些输出继续输出,所以可以依次调用多次dest方法,将输出写入多个目录。如果有目录不存在,将会被新建。gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./build/templates')) .pipe(minify()) .pipe(gulp.dest('./build/minified_templates'));
dest方法还可以接受第二个参数,表示配置对象。
gulp.dest('build', { cwd: './app', mode: '0644' })
配置对象有两个字段。cwd字段指定写入路径的基准目录,默认是当前目录;mode字段指定写入文件的权限,默认是0777。
3.3task()
task方法用于定义具体的任务。它的第一个参数是任务名,第二个参数是任务函数。下面是一个非常简单的任务函数。gulp.task('greet', function () { console.log('Hello world!'); });
task方法还可以指定按顺序运行的一组任务。
gulp.task('build', ['css', 'js', 'imgs']);
上面代码先指定build任务,它由css、js、imgs三个任务所组成,task方法会并发执行这三个任务。注意,由于每个任务都是异步调用,所以没有办法保证js任务的开始运行的时间,正是css任务运行结束。
如果希望各个任务严格按次序运行,可以把前一个任务写成后一个任务的依赖模块。
gulp.task('css', ['greet'], function () { // Deal with CSS here });
上面代码表明,css任务依赖greet任务,所以css一定会在greet运行完成后再运行。
task方法的回调函数,还可以接受一个函数作为参数,这对执行异步任务非常有用。
// 执行shell命令 var exec = require('child_process').exec; gulp.task('jekyll', function(cb) { // build Jekyll exec('jekyll build', function(err) { if (err) return cb(err); // return error cb(); // finished task }); });
如果一个任务的名字为default,就表明它是“默认任务”,在命令行直接输入gulp命令,就会运行该任务。
gulp.task('default', function () { // Your default task }); // 或者 gulp.task('default', ['styles', 'jshint', 'watch']);
执行的时候,直接使用gulp,就会运行styles、jshint、watch三个任务。
3.4watch()
watch方法用于指定需要监视的文件。一旦这些文件发生变动,就运行指定任务。gulp.task('watch', function () { gulp.watch('templates/*.tmpl.html', ['build']); });
上面代码指定,一旦templates目录中的模板文件发生变化,就运行build任务。
watch方法也可以用回调函数,代替指定的任务。
gulp.watch('templates/*.tmpl.html', function (event) { console.log('Event type: ' + event.type); console.log('Event path: ' + event.path); });
另一种写法是watch方法所监控的文件发生变化时(修改、增加、删除文件),会触发change事件。可以对change事件指定回调函数。
var watcher = gulp.watch('templates/*.tmpl.html', ['build']); watcher.on('change', function (event) { console.log('Event type: ' + event.type); console.log('Event path: ' + event.path); });
除了change事件,watch方法还可能触发以下事件。
end:回调函数运行完毕时触发。
error:发生错误时触发。
ready:当开始监听文件时触发。
nomatch:没有匹配的监听文件时触发。
watcher对象还包含其他一些方法。
watcher.end():停止watcher对象,不会再调用任务或回调函数。
watcher.files():返回watcher对象监视的文件。
watcher.add(glob):增加所要监视的文件,它还可以附件第二个参数,表示回调函数。
watcher.remove(filepath):从watcher对象中移走一个监视的文件。
4.gulp-load-plugins模块
一般情况下,gulpfile.js中的模块需要一个个加载。var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), concat = require('gulp-concat'); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); });
上面代码中,除了gulp模块以外,还加载另外三个模块。
这种一一加载的写法,比较麻烦。使用gulp-load-plugins模块,可以加载package.json文件中所有的gulp模块。上面的代码用gulp-load-plugins模块改写,就是下面这样。
var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), plugins = gulpLoadPlugins(); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter('default')) .pipe(plugins.uglify()) .pipe(plugins.concat('app.js')) .pipe(gulp.dest('build')); });
上面代码假设package.json文件包含以下内容。
{ "devDependencies": { "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": "~3.5.6" } }
5.gulp-livereload模块
gulp-livereload模块用于自动刷新浏览器,反映出源码的最新变化。它除了模块以外,还需要在浏览器中安装插件,用来配合源码变化。var gulp = require('gulp'), less = require('gulp-less'), livereload = require('gulp-livereload'), watch = require('gulp-watch'); gulp.task('less', function() { gulp.src('less/*.less') .pipe(watch()) .pipe(less()) .pipe(gulp.dest('css')) .pipe(livereload()); });
上面代码监视less文件,一旦编译完成,就自动刷新浏览器。
最后附上自己前一年前写的一个自动化任务,仅供参考:
// 载入Gulp模块 var gulp = require('gulp'); var less = require('gulp-less'); var autoprefixer = require('gulp-autoprefixer'); var cssnano = require('gulp-cssnano'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var htmlmin = require('gulp-htmlmin'); var browserSync = require('browser-sync'); var reload = browserSync.reload; gulp.task('style', function() { gulp.src('src/styles/*.less') .pipe(less()) .pipe(autoprefixer({ browsers: ['last 2 versions'] })) .pipe(cssnano()) .pipe(gulp.dest('dist/styles')) .pipe(reload({ stream: true })); }); gulp.task('script', function() { gulp.src('src/scripts/*.js') .pipe(concat('app.js')) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(reload({ stream: true })); }); gulp.task('image', function() { gulp.src('src/images/*.*') .pipe(gulp.dest('dist/images')) .pipe(reload({ stream: true })); }) gulp.task('html', function() { gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true, collapseBooleanAttributes: true, removeAttributeQuotes: true, removeComments: true, removeEmptyAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, })) .pipe(gulp.dest('dist')) .pipe(reload({ stream: true })); }); gulp.task('serve', ['style', 'script', 'image', 'html'], function() { browserSync({ notify: false, port: 2015, server: { baseDir: ['dist'] } }); gulp.watch('src/styles/*.less', ['style']); gulp.watch('src/scripts/*.js', ['script']); gulp.watch('src/images/*.*', ['image']); gulp.watch('src/*.html', ['html']); });
在github上面的地址:风流倜傥小小张
相关文章推荐
- Gulp前端自动化构建工具介绍及入门
- 前端自动化构建工具gulp的使用总结
- 自动化前端构建工具--gulp
- gulp前端自动化构建工具新手入门篇
- gulp前端自动化构建工具:常用插件介绍及使用
- gulp前端自动化构建工具(一):工具介绍和使用
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- gulp --- 前端自动化构建工具
- 前端项目自动化构建工具gulp
- gulp.js-前端自动化构建工具
- gulp 前端自动化构建工具之构建less
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- gulp --- 前端自动化构建工具
- 前端自动化构建工具gulp记录
- gulp前端自动化构建工具(四):gulp文件路径处理模块
- gulp前端自动化构建工具使用
- gulp前端自动化构建工具(二):gulp插件/gulp模块介绍
- 前端自动化构建工具 Gulp 使用
- 浅谈前端构建工具gulp