在选择构建工具时，看到更多人推荐gulp，从此入了gulp的坑～
一、安装node环境
百度谷歌一下就有了，在终端中分别输入 node -v 和 npm -v，若显示node和npm的版本号则说明node环境装好了。
二、安装gulp
linux下安装全局环境：
sudo npm install -g gulp
或cd进入项目目录下安装gulp到项目本地：
npm install gulp --save-dev
--save-dev的意思是将安装的gulp版本信息写入package.json,更新devDependencies值，以表明项目需要依赖gulp；在项目迁移时，执行npm install即可安装项目环境。
三、安装依赖文件
- 检查javascript（gulp-jshint）
- 编译sass/less文件（gulp-sass / gulp-less）
- sass/less混入库（node-bourbon / lesshat）
- 压缩css文件（gulp-minify-css）
- 合并文件（gulp-concat）
- 压缩js文件（gulp-uglify）
- 重命名文件（gulp-rename）
- ...
举个栗子：
npm install gulp-jshint gulp-sass gulp-concat node-bourbon --save-dev
四、新建gulpfile.js文件
gulp只有五个方法：task、run、watch、src、和dest。gulpfile文件书写可以参照下面的栗子：
// 引入 gulp
var gulp = require('gulp'); // 引入组件
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify'); // 编译Sass
gulp.task('sass', function () {
gulp.src('./css/*.scss')
.pipe(sass({
includePaths: require('node-bourbon').includePaths
}))
.pipe(concat('style.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('./css'));
}); // 语法检查
gulp.task('jshint', function() {
return gulp.src('./js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 合并文件之后压缩代码
gulp.task('minify', function(){
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./js'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('./dist'))
}); // 默认任务
gulp.task('default', function () {
gulp.run('sass');
gulp.run('jshint');
gulp.run('minify');
gulp.watch('./css/*.scss', function () {
gulp.run('sass');
});
});
五、执行gulp
在终端执行下面的命令执行所有的任务
gulp
或者执行单个任务
gulp minify
OK,大功告成～
参考: