前端构建工具之gulp的安装和配置

在选择构建工具时，看到更多人推荐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,大功告成～

参考:

• 干了这杯可乐！gulp上手指南
• 前端构建工具gulp入门教程
• gulp思维-gulp高级技巧
• gulp API文档
• Bourbon x gulp.js