介绍
gulp是一款前端构建工具。
安装
npm install -g gulp
npm install -g gulp-sass gulp-concat gulp-uglify gulp-rename
网上到处都是说不要全局安装，每一个项目下面都要自己重新安装一遍，说是什么避免版本不同造成一些问题，我就纳闷了，这玩意儿又不属于我代码的一部分，难道我100个项目要安装100次？有必要么？最坑爹的是文件数量那么多，强迫症看了都要吐血了，真不知道现代人的思想都是怎么想的。
事实上，默认情况下全局安装后在项目下运行gulp时会提示如下错误：
Local gulp not found in
Try running: npm install gulp
但是正确配置了NODE_PATH环境变量之后就不会有这个提示了。
使用
在项目根目录下新建一个名为gulpfile.js的文件，然后从该目录打开命令行执行gulp即可开始构建，现在主要的问题就是如何编写这个文件。
gulp这玩意合并文件有一个很大的缺点，就是如果指定合并JS的顺序的话，必须将所有JS文件列举出来，还是挺麻烦的。
下面是我常用的文件模板，作用是将src下面的所有js合并输出到dist目录下的all.js，同时压缩一份成all.min.js：
var gulp = require('gulp'); // 引入gulp
var concat = require('gulp-concat'); // 合并
var uglify = require('gulp-uglify'); // 压缩
var rename = require('gulp-rename'); // 改名
// var js = ['./src/*.js']; // 直接这样写的话无法指定JS合并顺序
var js =
[
'src/a.js',
'src/b.js',
'src/c.js'
];
// 合并，压缩文件
gulp.task('default', function()
{
gulp.src(js)
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
下面是某网友写的一个版本，还没仔细实践过，先贴这里：
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 检查脚本
gulp.task('lint', function() {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 编译Sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 合并，压缩文件
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化
gulp.watch('./js/*.js', function(){
gulp.run('lint', 'sass', 'scripts');
});
});
