标签：更改 图片压缩 自动化 项目 ref 合并 目录 发布 tty
gulp.js是一款自动化构建工具，我们经常使用它在开发过程自动执行常见的任务。gulp.js 是基于 Node.js 构建的,利用 Node.js,可以快速构建项目。
由于gulp使用基于node，所以首先要安装node环境。node.js有很多非常强大的作用，本文主要应用其环境以及把它当成一款包管理器来使用
使用gulp来构建项目，其步骤为：
1.在目录中创建dist文件夹（要发布的代码）
src文件夹（开发代码）
2.在根目录下写命令行 初始化：npm init ,此时根目录会出现package.json
3.局部安装gulp
npm install gulp --save-dev
4.创建gulpfile.js文件 与dist和src同级
配置信息：
首先引入：
var gulp = require("gulp")
（1）若想把src中的图片压缩至dist中
首先需要引入：
var imgin = require("gulp-imagemin")
其中gulp-imagemin为图片压缩的gulp插件，在require之前，首先需要在命令中 npm install下来
其次创建gulp任务
gulp.task("copyimg",function(){
return
gulp.src("src/img/images/**/*").
pipe(imgin()).
pipe(gulp.dest("dist/images"));
})
其中copyimg为任务名，gulp.src（）中为要操作的图片，pipe()中是要执行的，imgin是上面定义的压缩图片插件的名，gulp.dest()为要将图片移动到的文件夹
（2）若想把src的所有js文件合并成一个js文件且放入dist下
首先，先引入
var uglify = require("gulp-uglify"); var concat = reqiire("gulp-concat"); var rename = require("gulp-rename");
其中 gulp-uglify 用来压缩js ,gulp-concat 用来合并js,gulp-rename用来重命名.同理在require之前需要 npm install ....
其次，创建gulp任务
gulp.task("copyjs",function(){
return
gulp.src("/src/js/**/*").
pipe(concat("all.js")).
pipe(uglify()).
pipe(rename("all.min.js")).
pipe(gulp.dest("dist/js"))
})
这个任务意思就是把src/js/下的所有文件合并起来，叫all.js。再将all.js压缩，之后重命名为all.min.js,将此js放入dist/js/下
（3）若想将css文件压缩，新增一个hash值，放到dist文件下
var minifycss = require("gulp-minifycss"); var rev = require("gulp-rev")
其中gulp-minifycss 用来压缩css文件 ，gulp-rev用来给静态资源文件加上一个hash值，同理注意使用 npm install ...下载插件
gulp.task("copycss",function(){
return
gulp.src("src/css/**/*").
pipe(minifycss()).
pipe(rev()).
pipe(gulp.dest("dist/css")).
pipe(rev.manifest()).
pipe(gulp.dest("dist/css"));
})
此任务将src/css里的所有文件压缩并生成hash后缀名。rev.manifest()是会生成一个json，里面存储的是文件原名和生成hash文件名的对应。最后将文件放到dist/css下
（4）若想html文件压缩并放入dist下
var htmlmin = require("gulp-htmlmin");
其中gulp-htmlmin用来压缩html文件
gulp.task("copyindex",function(){
return
gulp.src("src/client/**/*").
pipe(htmlmin({
removeComments:true,
collapseWhite:true,
collapseBooleanAttributes:true,//省略布尔属性的值，如<input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
})).pipe(gulp.dest("dist/client"))
})
此task用来压缩html页面，有很多选项可选择，如上注释
（5）若css文件用了gulp-rev。则html文件在使用时需要动态更改引入的css文件名
var revCollector = require("gulp-rev-collector");
gulp-rev-collector根据rev生成的json文件用来替换html 中的<link href=""/>
gulp.task("rev-collector",function(){
return
gulp.src(["dist/css/**/*.json","dist/client/*.html"]).
pipe(revcollector({replaceReved:true})).
pipe(gulp.dest("dist/client"));
})
其中设置replaceReved标识, 用来说明模板中已经被替换的文件是否还能再被替换,默认是false
(6)若想自动监听
gulp.task("watch",function(){
gulp.watch("src/index.html",["copyindex"]);
gulp.watch("src/images/**/*",["copyimg"])
})
此任务对src下的index.html的文件监听任务名为copyindex的任务，同时对src/images下的所有图片监听copyimg这个任务
（7）创建服务器
var connect = require(‘gulp-connect‘);
用来创建个服务器
gulp.task(‘connect‘,function(){ connect.server({ root:"dist",//根目录 port: 8080,//端口号 livereload:true }); });
此task设置了服务的根目录，端口号，以及是否即时刷新
本文主要分享这些，一般为gulp常用的命令，需特别注意文中所有reqire进来的资源 都需要用npm install 插件名将插件下载下来
标签：更改 图片压缩 自动化 项目 ref 合并 目录 发布 tty
原文地址：http://www.cnblogs.com/aiiright/p/6762355.html
