一个简易的gulp例子

gulp不仅仅是打包，可以优化前端的流程,(webpack打包优于gulp)

gulpfile.js

定义gulp所有的任务

安装需要的插件

npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

• gulp-rev
• gulp-rev-replace

• gulp-useref
  通过注释的方式告诉gulp合并文件

  
  
  

  gulp-useref 合并文件
• gulp-filter
• gulp-uglify
• gulp-csso

简单的栗子

gulpfile.js文件

/**
 *首先加载要依赖的加载项
 */
var gulp = require('gulp');

// 给每个文件添加版本号(在文件后面加上哈希码，当文件改变时更改哈希码，内容一样的文件哈希码一样(即使修改时间不一样))
var rev = require('gulp-rev');

// 将文件里面的引用改成新的
var revReplace = require('gulp-rev-replace');

// 通过注释的方式告诉gulp合并文件 地址：https://www.npmjs.com/package/gulp-useref
var useref = require('gulp-useref');

// 过滤器 （筛选、restore恢复）
var filter = require('gulp-filter');

// 压缩js文件
var uglify = require('gulp-uglify');
// 压缩css文件
var csso = require('gulp-csso');
/* end */

// 定义一个任务
gulp.task('default', function () {
    var jsFilter = filter('**/*.js', {restore: true});
    var cssFilter = filter('**/*.css', {restore: true});
    // 排除首页，保证首页名字不变
    var indexHtmlFilter = filter(['**/*', '!**/index.html'], {restore: true});

    // 每个pipe处理就像是一个过滤器，对这个文件流进行处理
    return gulp.src('src/index.html')
        // 分析带有useref注释的语句，将包括的js、css文件放进文件流
        .pipe(useref())
        // 将js文件筛选出来
        .pipe(jsFilter)
        // 将js文件进行压缩
        .pipe(uglify())
        // 通过restore将js文件重新扔回文件流里面
        .pipe(jsFilter.restore)

        // css文件处理
        .pipe(cssFilter)
        .pipe(csso())
        .pipe(cssFilter.restore)

        // 给文件添加版本号
        .pipe(indexHtmlFilter)
        .pipe(rev())
        .pipe(indexHtmlFilter.restore)
        // 更新文件里的引用
        .pipe(revReplace())

        // dest表示已经结束，将文件流扔入到'dist目录下'
        .pipe(gulp.dest('dist'));
});

注：

  *
  */```

```/*! 压缩时不会被省略掉
  *
  */```

### 其他插件
1. gulp-watch 
 监听文件的改变，自动执行任务，当js文件改变时自动打包
2. gulp-postcss
 与autoprefixer插件相结合，自动给css属性添加前缀
3. gulp-concat
 可以将很多文件合并成一个文件
4. gulp-responsive
 可以生成一系列的响应式图片