一份开箱即用的gulp配置及不完全指北

这篇文章也发在我的博客，欢迎围观?

The goal of gulp-cli is to let you use gulp like a global program, but without installing gulp globally.

For example if you installed gulp 3.9.1 globally and your project testGulp4 has gulp 4.0 installed locally, what would happen if you run gulp -v into testGulp4? Without gulp-cli globally installed :

CLI version 3.9.1
In this case the version displayed is the global version of gulp. The local version 4.0 is totally ignored.
With gulp-cli globally installed :
CLI version 1.2.1
Local version 4.0.0-alpha.2
In this case the version displayed is the global version of gulp-cli and the local version of gulp. The global gulp 3.9.1 is totally ignored.
复制代码

Conclusion : gulp-cli: is preferred because it allows you to use different versions of gulp. gulp: needs a local version of gulp installed.

自动化构建工具——gulp

参考网址：
https://segmentfault.com/a/1190000000372547#articleHeader0
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
http://www.gulpjs.com.cn/docs/api/
https://www.npmjs.com/package/gulp-jshint

使用步骤

1. 检查Node和npm

node --version
npm --version
复制代码

2. 安装gulp command line工具

npm install --global gulp-cli
复制代码

3. 创建package.json

npm init
复制代码

4. 安装gulp在开发环境（devDependencies）
   ——如果前端开发，仅使用npm作为开发环境依赖包管理的话，可以直接安装在本地，不用区分开发环境。

npm install --save-dev gulp

安装在本地
npm install --save gulp
复制代码

5.创建一个gulpfile 在工程根目录，创建一个gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});
复制代码

6. 大功告成

可以正式测试gulp（运行gulp）

gulp
复制代码

默认任务将会执行

Using gulpfile ~/my-project/gulpfile.js
[11:15:51] Starting 'default'...
[11:15:51] Finished 'default' after 103 μs
复制代码

7. 安装依赖

逐个安装

• npm install gulp-less gulp-concat gulp-uglify gulp-rename --save 如果上述命令提示权限错误，需要添加sudo再次尝试

或

使用package.json安装

• 在项目根目录放入已经生成的package.json文件
• npm install npm会根据package.json文件中的依赖包自动下载全部依赖

配置gulpfile.js

要配置gulpfile，需要我们清楚项目需要执行哪些任务。如：

• 检查JavaScript
• 编译less
• 合并JS
• 丑化压缩重命名JS
  ...

安装gulp-jshint的步骤

gulp-jshint需要依赖jshint，所以需要一并安装jshint
1. npm install jshint --save
2. npm install gulp-jshint --save
对比原生的显示风格，可以安装显示风格更为清晰的jshint-stylish
3. npm install jshint-stylish --save
如果需要使用es6编程，那么需要配置.jshintrc文件，否则会报错
4. 在项目根目录新建.jshintrc，并且在里面写入：
    {
      "esversion": 6
    }
复制代码

安装gulp-babel的步骤

gulp-babel需要依赖babel-core，所以需要一并安装babel-core
1. npm install babel --save
2. npm install babel-core --save
复制代码

步骤：

//定义目录
var app = {
    srcPath: 'src/',
    buildPath: 'build/',
    distPath: 'dist/'
};

//导入组件
var gulp = require( 'gulp' );
var less = require( 'gulp-less' );
var cssmin = require( 'gulp-cssmin' );
var jshint = require( 'gulp-jshint' );
var stylish = require( 'jshint-stylish' );
var babel = require('gulp-babel');
var concat = require( 'gulp-concat' );
var uglify = require( 'gulp-uglify' );
var rename = require( 'gulp-rename' );
var imagemin = require( 'gulp-imagemin' );
var connect = require( 'gulp-connect' );
var open = require( 'open' );

//1.处理依赖包
gulp.task( 'lib', function () {
    gulp.src( 'bower_components/**' )
        .pipe( gulp.dest( app.buildPath + 'lib/' ) )
        .pipe( gulp.dest( app.distPath + 'lib/' ) )
        .pipe( connect.reload() );
    return gulp.src( app.srcPath + 'lib/**' )
        .pipe( gulp.dest( app.buildPath + 'lib/' ) )
        .pipe( gulp.dest( app.distPath + 'lib/' ) )
        .pipe( connect.reload() );                      //重新加载页面
} );

//2.定义系列任务

//定义任务把所有html文件搬运至项目发布目录
gulp.task( 'html', function () {
    return gulp.src( app.srcPath + '**/*.html' )        //return，返回一个stream，因为该项目需要异步执行
        .pipe( gulp.dest( app.buildPath ) )
        .pipe( gulp.dest( app.distPath ) )
        .pipe( connect.reload() )
} );

//定义任务：编译less为css，并进行压缩
gulp.task( 'less', function () {
    return gulp.src( app.srcPath + 'styles/basic.less' )
        .pipe( less() )                                         //将less编译为css
        .pipe( rename( 'basic.min.css' ) )
        .pipe( gulp.dest( app.buildPath + 'CSS/' ) )
        .pipe( cssmin() )                                       //压缩css
        .pipe( gulp.dest( app.distPath + 'CSS/' ) )
        .pipe( connect.reload() );
} );

//定义任务：检查JS文件是否存在报错或警告
gulp.task( 'jshint', function () {
    return gulp.src( app.srcPath + 'scripts/**/*.js' )
        .pipe( jshint() )
        .pipe( jshint.reporter( stylish ) )             //使用stylish风格显示
        .pipe( jshint.reporter( 'fail' ) );             //JS文件有警告或报错任务则停止
} );

//定义任务：babel编译es6至es5，合并js并进行压缩
gulp.task( 'scripts', ['jshint'], function () {
    return gulp.src( app.srcPath + 'scripts/**/*.js' )
        .pipe( babel( {
            presets: ['env']
        } ) )
        .pipe( concat( 'basic.js' ) )                           //合并JS
        .pipe( jshint() )
        .pipe( rename( 'basic.min.js' ) )
        .pipe( gulp.dest( app.buildPath + 'scripts/' ) )
        .pipe( uglify() )                                       //压缩JS
        .pipe( jshint() )
        .pipe( gulp.dest( app.distPath + 'scripts/' ) )
        .pipe( connect.reload() );
} );

//定义任务：压缩图片
gulp.task( 'images', function () {
    return gulp.src( app.srcPath + 'images/**' )
        .pipe( gulp.dest( app.buildPath + 'images/' ) )
        .pipe( imagemin() )
        .pipe( gulp.dest( app.distPath + 'images/' ) )
        .pipe( connect.reload() );
} );

//定义任务：不传入该任务要执行的函数，直接执行一串任务
gulp.task( 'build', [ 'lib', 'html', 'less', 'jshint', 'scripts', 'images' ] );

//定义任务：运行一个服务器，执行定义的任务
gulp.task( 'server', ['build'], function () {
    //设置服务器
    connect.server( {
        root: [ app.buildPath ],   //服务器根目录
        livereload: true,        //是否热更新。设置为true，则热更新（猜测：watch任务只要满足监视条件就会触发指定任务，指定任务执行了connect.reload任务。但是否实时刷新（livereload），则需要livereload为true，允许热更新，才自动刷新页面）
        port: 8888               //端口号
    } );
    //监听任务
    gulp.watch( 'bower_components/**/*', ['lib'] );           //只要路径的文件发生变化，就会执行后面的任务
    gulp.watch( app.srcPath + 'lib/**', ['lib'] );
    gulp.watch( app.srcPath + '**/*.html', ['html'] );
    gulp.watch( app.srcPath + 'scripts/**/*.js', ['scripts'] );
    gulp.watch( app.srcPath + 'images/**/*', ['images'] );
    gulp.watch( app.srcPath + 'styles/**/*.less', ['less'] );

    //通过浏览器把指定的地址 （http://localhost:8888）打开。
    open( 'http://localhost:8888' );
} );

//定义默认任务
gulp.task( 'default', ['server'] );

复制代码

gulp命令

gulp.src(globs[, options])
复制代码

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

---

gulp.dest(path[, options])
复制代码

---

gulp.task(name[, deps], fn)
复制代码

[deps]中的任务会在fn执行之前完成。
注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

支持异步任务，只要fn满足以下三点其中一点：

1. 返回一个stream

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});
复制代码

或者另外一种更常见的写法：

gulp.task('somename', function() {
  return gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
});
复制代码

2. 接受一个callback

// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
// 编译 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});
复制代码

3. 返回一个promise

var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});
复制代码

---

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
复制代码

glob的文件发生变化，执行设定的任务。

glob指令

参考网址： https://github.com/isaacs/node-glob/blob/master/README.md

* 匹配单个路径的0个或者多个字符 
** 匹配0个或多个目录以及子目录下的文件
? 匹配1个字符  
[...] 匹配一个范围  
!(pattern|pattern|pattern) 匹配没有一个符合的情况
?(pattern|pattern|pattern) 匹配符合0个或一个特征的情况
+(pattern|pattern|pattern) 匹配符合至少一个特征的情况
*(pattern|pattern|pattern) 匹配符合0个或多个特征的情况
@(pattern|pat*|pat?erN)  匹配只符合一个特征的情况
复制代码