gulp入门
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；他不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成css、html、image、javascript等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新，并监听文件在改动后重复指定的这些步骤。gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。
教程参考网站：http://www.ydcss.com/archives/18
1. 首先安装node
2. 安装淘宝镜像，可使用cnmp速度更快
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 全局安装gulp
cnpm install gulp-g
查看是否正确安装：命令提示符执行npm gulp -v，出现版本号即为正确安装
4. 在项目中初始化
在项目文件夹--右击--git bash here---打开命令行窗口
cnpm init
输入相应项目信息，在自动生成的package.json中查看
Ctrl+C 结束当前命令
5. 在项目中安装
cnpm install gulp --save-dev
--save-dev可将信息添加到package.json中,查看是否加入
6. html压缩
安装压缩html的插件
cnpm install gulp-minify-html --save-dev
新建项目根目录下gulpfile.js,写入
vargulp=require('gulp');//本地安装gulp所用到的地方
varminifyHtml=require("gulp-minify-html");//加入相应依赖
//html压缩
gulp.task('htmltask',function() {//htmltask为自定义的任务名称
gulp.src('*.html')// 要压缩的html文件
.pipe(minifyHtml())//压缩，和上面定义的依赖名相同
.pipe(gulp.dest('./dist'))//压缩到哪
});
在命令中输入，执行上面的任务
gulphtmltask
总结：步骤1安装插件 2添加依赖 3 添加
生成里dist 里面只有一行文字
7. css压缩
安装压缩css的插件cnpm installgulp-clean-css--save-dev
gulp-minify-css已经被废弃，请使用gulp-clean-css，用法一致
gulpfile.js在最上面增加依赖
var minifycss= require('gulp-clean-css');
下面添加
gulp.task('csstask',function(){
gulp.src('./css/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./dist/css'));//dist下新建css文件夹
});
在命令中输入，执行上面的任务
gulpcsstask
8. js压缩 合并
安装压缩js的插件npm installgulp-uglify--save-dev
安装合并js的插件npm installgulp-concat--save-dev
gulpfile.js在最上面增加依赖
var minifyjs= require("gulp-uglify");
varconcat=require('gulp-concat');
下面添加：
gulp.task('jstask',function(){
gulp.src('./js/*.js')
.pipe(minifyjs())// 压缩
.pipe(concat('all.js'))//合并后叫all.js
.pipe(gulp.dest('./dist/js'))//输出到dist下js文件夹
});
在命令中输入，执行上面的任务
gulpjstask
9. 生成雪碧图
安装插件：
cnpm install gulp.spritesmith --save-dev
在gulpfile上面加入：
var spritesmith=require('gulp.spritesmith');
在下面添加：
gulp.task('sprite',function(){
gulp.src(['./img/*.png'])//此处方括号，为数组，可以是多种格式，或者任意几张图片
.pipe(spritesmith({
imgName:'sprite.png',//生成大图的名字，注意加扩展名.png或.jpg
cssName:'sprite.css'//生成css文件名
}))
.pipe(gulp.dest('./dist/sprites'));
})
10. 自动监听
//自动监听
gulp.task('watch', function () {
gulp.watch('*.html', ['htmltask']);//监听文件名 任务名
gulp.watch('css/*.css', ['csstask']);
gulp.watch('js/*.js', ['jstask']);
});
在命令中输入，执行上面的任务
gulp watch
