用gulp打包发布项目

在发布之前还可以做代码优化：
1.压缩
2.合并
3.增加版本号

首先，手动打包发布的网站比如：https://javascript-minifier.com
显然，手动打包麻烦费时费力的，那自从node.js出来以后，方便快捷，自动化处理。

打包的主流3个工具：
1.Grunt 自动化构建工具
2.gulp 自动化构建工具
3.webpack 静态资源打包工具

这里主要先介绍用gulp工具打包，中文网址： http://www.gulpjs.com.cn/

易于使用

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

插件高质

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

易于学习

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

---

先安装nodejs，然后在npm命令行里输入 npm init 生成package.json文件，里面存储一些依赖项，下面是安装：

运行 gulp -v ，出现版本号，代表安装成功。

gulpfile.js 存放想要执行的任务。

首先声明好要依赖的加载项，var gulp=require('gulp')
gulpfile.js 中定义任务，

gulp.task('task-name',function(){});

接下来安装gulp的各种插件，

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

修改gulpfile.js文件

var gulp=require('gulp');var rev=require('gulp-rev');/*给文件用哈希码添加版本号*/var revReplace=require('gulp-rev-replace');/*更新引用*/var useref=require('gulp-useref');/*合并文件*/var filter=require('gulp-filter');/*过滤器：筛选，恢复*/var uglify=require('gulp-uglify');/*压缩js*/var csso=require('gulp-csso');/*压缩css*/gulp.task('task-name',function(){var jsFilter=filter('**/*.js',{restore:true});var cssFilter=filter('**/*.css',{restore:true});var indexHtmlFilter=filter(['**/*','!**/index.html'],{restore:true});return gulp.src('src/html')/*需要处理的文件*/.pipe(useref())/*处理注释压缩*/.pipe(jsFilter)/*筛选js文件*/.pipe(uglify())/*压缩js文件*/.pipe(jsFilter.restore)/*放回流里*/.pipe(cssFilter)/*筛选css文件*/.pipe(csso())/*压缩css文件*/.pipe(cssFilter.restore)/*放回流里*/.pipe(indexHtmlFilter)/*筛选html文件*/.pipe(rev())/*生成哈希版本号*/.pipe(indexHtmlFilter.restore)/*放回流里*/.pipe(revReplace())/*更新index引用*/.pipe(gulp.dest('dist'));/*文件流放到dist目录下*/});

执行 gulp task-name

gulp-useref插件的使用：在html中加入注释打包部分的代码

这里只实现了gulp的打包压缩和版本文件名的功能，其实，还有很多更厉害的功能
比如
gulp-watch监听文件的改变，自动执行任务，
gulp-postcss和 autoprefixer 添加浏览器的前缀，对css文件进行处理，
gulp-concat把多个文件直接合并成一个文件，
gulp-responsive实现图片响应式
等等