gulp——初学

始

请随意跳过

---

由于项目原因，一直都在使用grunt进行自动化部署，虽然之前也知道现在比较推崇使用gulp替换grunt使用，尤其是gulp+webpack或gulp+browserSync更算是前沿新科技（也可能是小弟技术栈浅薄，望不深究）。但对gulp也只是做了简单的了解，并没有进行详细的学习。

最近正好有时间，也算是还一下欠下的技术债（虽然所有点多）。还是稍微认真地看了下gulp的使用，完成了一个较简单但完整的gulpfile.js。随gulp社区的活跃度不断提高，plugins也是更加完备，但重复功能的plugins也是多种多样，因此，在进行配置时，最好有选择的选用plugin，也许能减少大量的工作。另外，还有一点，gulp在针对不同框架，不同生产环境，及不同目录结构都会有不同的配置特点，需要在使用时进行特定学习，而无需全部笔记（实在是太多了(⊙﹏⊙)b）。

比

---

gulp与grunt相比，个人感觉可以归为简单的两条

1. gulp量级更轻
2. gulp的配置文件更像是程序文件，grunt的配置文件更像是配置文件

料

---

在我的理解中，gulp就是基于node流通过管道进行系列化的功能部署，提供的Api也是相当简单，主要有gulp.src | gulp.dest | gulp.task | gulp.watch。当然，简单不代表不强大。

那么首先来看一下，所谓自动化部署我们需要做些什么事情。上图：

当然，这仅仅是小弟的一些自我见解，如果有大神补充，那必是格外欢迎。

有了大概的思路了，那么便需要对应的工具来搞一下了，在此，也是整理了一下基本用到的plugins，如下脑图：

其中标紫的是在后续实际代码中用到的plugin

前文中提到要选则好的plugin使用绝对事半功倍，如图中展示的，就可以使用usemin集成对css，js和html文件的相关部署，而无需多余引入gulp-concat，gulp-concat-css等plugin。

思路有了，工具有了，接下来便是确定使用的场景了，在这里只是对最基本的原生JavaScript开发的示例的简单部署，暂不涉及服务端，也不涉及任何框架及第三方库。先上项目结构和index.html，如图所示：

这里要做的主要是针对src下的文件及其子目录中的文件，根据不同类型，进行配置，最终生产到dist/的对应目录下。

源码请参见：https://github.com/wolf-wolf/gulp_learn

var gulp = require('gulp'),    plugins = require('gulp-load-plugins')(),    pump = require('pump'),    del = require('del'),    runSequence = require('run-sequence'),    browserSync = require('browser-sync').create(),    reload = browserSync.reload;var settings = {    enviroment: process.env.NODE_ENV || 'production',    configFolder: './config',    srcFolder: './src',    distFolder: './dist/**/*',}//构建前清理原构建目录gulp.task('clean', function(cb) {    del(settings.distFolder, cb);});//对代码文件进行打包gulp.task('usemin', function(cb) {    del(settings.distFolder);    pump([gulp.src('./src/index.html'),            plugins.usemin({                mainCss: [                    plugins.autoprefixer('last 2 version'),                    plugins.rename({ suffix: '.min' }),                    plugins.cssnano,                    plugins.rev                ],                vendorCss: [                    plugins.autoprefixer('last 2 version'),                    plugins.rename({ suffix: '.min' }),                    plugins.cssnano,                    plugins.rev                ],                html: [function() {                    return plugins.htmlmin({ collapseWhitespace: true });                }],                mainJs: [                    plugins.rename({ suffix: '.min' }),                    plugins.uglify,                    plugins.rev                ],                scripts: [                    plugins.rename({ suffix: '.min' }),                    plugins.uglify,                    plugins.rev                ]            }),            gulp.dest('dist/')        ],        cb)});//图片文件构建gulp.task('images', function() {    return gulp.src('src/images/**/*')        .pipe(plugins.cache( //图片压缩            plugins.imagemin({                optimizationLevel: 3,                progressive: true,                interlaced: true            })))        .pipe(gulp.dest('dist/images')); //输出构建后的文件});gulp.task('notify', function() {    gulp.src('src/index.html').pipe(plugins.notify({ message: 'all task complete' }))});//完整的构建任务gulp.task('process', ['usemin', 'images'], function(cb) {    cb(null);});gulp.task('build', ['clean', 'process'], function() {});//开发环境gulp.task('dev', function() {    browserSync.init({        files: ['src/**/*'],        server: {            baseDir: "./src"        },        injectChanges: true    });});

这里贴了一下gulpfile.js的代码，有几个注意点：

1.进行usemin任务前对dist目录的清空，如果在未清除完成时进行usemin，则会报EEXIST文件目录已存在的错误

2.使用browserSync的injectChanges属性，保证在进行css变更时为注入而非全页面刷新

3.usemin不包括图片的压缩，需单独写任务进行，而且在此并未对图片输出的路径做特殊处理，因此需要保证index.html中的路径为images/，而图片的输出路径为dist/images，此处也可通过相应插件进行路径修改。

4.在进行分组合并时，需要注意html中 build:注释部分和usemin配置的对应性。如:
html文件中的注释

<!-- build:vendorCss ./css/vendor.css -->...<!-- endbuild -->

对应到usemin任务中的

`vendorCss: [    plugins.autoprefixer('last 2 version'),    plugins.rename({ suffix: '.min' }),    plugins.cssnano,    plugins.rev],`

5.在此，代理、bower和npm安装包的自动注入，sprite图的自动生成及引用修改，暂未写明，后续若有时间在进行补全，若有大神愿提供方法，随时欢迎。

库

---

官网

gulp官网：https://gulpjs.com/
browserSync官网：https://www.browsersync.io/
wiki对gulp的介绍：https://en.wikipedia.org/wiki/Gulp.js

相关博客

http://www.cnblogs.com/terrylin/p/5229169.html
http://andy-carter.com/blog/a-beginners-guide-to-the-task-runner-gulp
http://blog.csdn.net/u013558749/article/details/51645033
https://browsersync.io/docs/options#option-browser
http://andrewhathaway.net/environment-based-configuration-for-javascript-applications/
https://knpuniversity.com/screencast/gulp/version-cache-busting
https://segmentfault.com/a/1190000005357048
http://andy-carter.com/blog/a-beginners-guide-to-the-task-runner-gulp
http://www.cnblogs.com/tinyphp/p/4991238.html
http://www.ydcss.com/archives/94
https://segmentfault.com/a/1190000002768534
https://segmentfault.com/a/1190000002932998
https://github.com/substack/stream-handbook
https://markgoodyear.com/2014/01/getting-started-with-gulp/