前端工具gulp的用途和使用方法

参考链接：
http://blog.sina.com.cn/s/blog_6592d8070102vmuq.html
https://segmentfault.com/a/1190000002698606
http://www.gulpjs.com.cn/docs/api/ (Gulp API中文网)
http://blog.csdn.net/kiwi_coder/article/details/36422385

在接触前端开始就听说过grunt和gulp是很叼的前端构建工具，但不知道到底有多叼，只是听说可以自动编译less，sass为css，目前还没有使用less和sass，所以也就没有尝试使用grunt和gulp。但是作为一个技术爱好者还是经不住诱惑，照着网上的教程简单使用了一下，总算是知道有什么用处了，因为都说gulp比grunt更简单好用，就以gulp的使用方法为例来说明一下。
1.文件合并：关于文件合并很多人存在这样的疑惑，在前端开发中到底该把所有js和css写在一个文件里还是各个页面分开写，我的建议是开发的时候分开写，上线的时候合并为一个，这样的好处是对于浏览器来说，不同页面中相同的文件默认会请求一次缓存下来，其他页面请求相同文件时就直接从缓存中读取，减少文件的网络请求可以提高网页速度，所以文件合并的是很有必要的。

2.文件压缩：既然都合并了，何不再压缩一下呢

3.语法检查：这个功能一般会和下面第4条功能配合使用，当文件修改的时候检查是否有语法错误，并在命令行中输出错误信息。

4.监听文件变化：监听某个目录下文件是否修改，修改的话就执行特定的操作，比如上面几个操作。
以上4点是比较常用的功能，更多功能根据自己需要添加

var gulp = require('gulp');
var jshint = require('gulp-jshint');//语法检查
var concat = require('gulp-concat');//合并文件
var uglify = require('gulp-uglify');//压缩代码
var rename = require('gulp-rename');//重命名
// 语法检查
gulp.task('jshint', function () {
return gulp.src('public/javascripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合并文件之后压缩代码
gulp.task('minify', function (){
return gulp.src('public/javascripts/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('public/javascripts/dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('public/javascripts/dist'));
});
// 监视文件的变化
gulp.task('watch', function () {
gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
});
// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);
// gulp.task('default', ['jshint', 'minify']);

目录结构

我们将要使用Gulp插件来完成我们以下任务：

sass的编译（gulp-sass）
自动添加css前缀（gulp-autoprefixer）
压缩css（gulp-minify-css）
js代码校验（gulp-jshint）
合并js文件（gulp-concat）
压缩js代码（gulp-uglify）
压缩图片（gulp-imagemin）
自动刷新页面（gulp-livereload）
图片缓存，只有图片替换了才压缩（gulp-cache）
更改提醒（gulp-notify）

你仅仅需要知道的5个gulp命令

gulp.task(name, fn)这个你应经见过了

gulp.run(tasks…)尽可能多的并行运行多个task

gulp.watch(glob, fn)当glob内容发生改变时，执行fn

gulp.src(glob)返回一个可读的stream

gulp.dest(glob)返回一个可写的stream