简单的gulp打包示例

Gulp是一个前端自动化构建工具，通过配置一系列的task，定义task处理的事物（例如文件压缩合并、雪碧图、启动server、 版本控制等），然后定义执行顺序，来让gulp执行task，从而构建前端项目的流程。旨在规范前端开发流程，帮助前端开发人员自动化一些工作，简化前端开发人员的开发流程。

这是一个简单的gulp打包示例：

涉及到的插件：

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-csso": "^3.0.1",
    "gulp-filter": "^5.1.0",
    "gulp-rev": "^8.1.1",
    "gulp-rev-replace": "^0.4.4",
    "gulp-uglify": "^3.0.0",
    "gulp-useref": "^3.1.5"
}

gulpfile.js文件： 

注意： filter是对src的二次过滤，filter之后的操作是对filter出的东西进行操作。当你restore之后就是对src的东西进行操作了。

以下面例子说明：.pipe(jsFilter)过滤js文件之后，对过滤出来的js文件进行压缩，若不执行.pipe(jsFilter.restore)，直接进行.pipe(cssFilter)，是筛选不出css文件的，因为这时是在过滤出来的js文件压缩后（返回被压缩的js文件）进行的操作，自然而然筛选不到css文件。而通过.pipe(jsFilter.restore)的步骤，后续的操作就是基于gulp.src('./index.html').pipe(useref())进行文件筛选。

var gulp = require('gulp');
/**
 * 插件名：gulp-rev
 * 问题：若改变了文件内容，但不改变文件名，重新发布到服务器时，在用户浏览器会有缓存。若手动维护版本号，操作复杂且容易出错
 * 简述：为静态文件随机添加一串hash值, 解决cdn缓存问题
 * 详见：给每个文件添加版本号，根据文件内容计算文件的哈希码，一旦文件改变，会重新生成哈希码，文件名称也随之改变
 **/
var rev = require('gulp-rev');
/**
 * 插件名：gulp-rev-replace
 * 问题：根据rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径
**/
var revReplace = require('gulp-rev-replace')
/**
 * 插件名：gulp-useref
 * 详见：通过注释的方式，告诉gulp哪些文件需要合并
**/
var useref = require('gulp-useref')
/**
 * 插件名：gulp-filter
 * 详见：过滤器，在虚拟文件流中过滤特定的文件
 **/
var filter = require('gulp-filter');
/**
 * 插件名：gulp-uglify
 * 详见：压缩js代码
 **/
var uglify = require('gulp-uglify');
/**
 * 插件名：gulp-csso
 * 详见：压缩css代码
 **/
var csso = require('gulp-csso')

gulp.task('default', function () {
  var jsFilter = filter('**/*.js', {restore: true});
  var cssFilter = filter('**/*.css', {restore: true});
  var indexHtmlFilter = filter(['**/*', '!**/index.html'], {restore: true});

  return gulp.src('./index.html') // 引入需要处理的文件
    .pipe(useref()) // 分析index文件中带有<!-- build: --><!-- endbuild -->注释标志的文件，会将注释标志中的文件放到文件流中，就不需要在src中引入
    .pipe(jsFilter) // 从文件流中筛选js文件
    .pipe(uglify()) // 压缩js文件
    .pipe(jsFilter.restore) // 返回文件流
    .pipe(cssFilter) // 从文件流中筛选css文件
    .pipe(csso()) // 压缩css文件
    .pipe(cssFilter.restore) // 返回文件流
    .pipe(indexHtmlFilter) // 从文件流中筛选全部文件（排除index.html文件）
    .pipe(rev()) // 为文件重命名为带版本号的名称
    .pipe(indexHtmlFilter.restore) // 返回文件流
    .pipe(revReplace()) // 将index中对文件的引用进行更新
    .pipe(gulp.dest('dist')) // 将文件流保存到dist目录
})

运行命令：gulp默认会执行命名为default的任务

gulp default
或
gulp

其他常用Gulp插件 ：

gulp-watch：监听文件的改变，自动打包

gulp-postcss：与gulp-autoprefixer插件结合，自动给css属性添加浏览器前缀

gulp-concat：将多个文件合并成一个文件

gulp-responsive：自动生成响应式图片

在npm官网搜索“gulp-”就能找到Gulp所有插件：https://www.npmjs.com/search?q=gulp-

Gulp插件千千万，但是gulpfile.js文件在整个项目周期，甚至不同项目中，改变甚微（基本不会改变）。我们很有必要自己去尝试编写一个完美适用的gulpfile文件。

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！