用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实现图片响应式 等等