使用gulp构建前端工程浅谈

此文是在win8系统中安装gulp为例的。

一、安装node.js

安装gulp首先得先安装node.js（下载地址：官网http://www.nodejs.org/download/）。

二、进入命令控制台

接下来需要进入cmd中，具体步骤为：

按键win+R，进入以下界面



输入cmd，敲回车进入命令终端

三、创建package.json

在安装非全局的npm前，我们需要先创建一个package.json文件，这个文件手动创建代码太多，我们通过命令来创建。

1.输入创建指令

npm init

2.输入相关信息



3.完成name,varsion….license项的信息填写后会出现这样一段话

四、安装gulp

$ npm install gulp -g

该指令会将gulp安装到全局环境中。然后需要cd到具体的项目目录，为项目安装具体的npm，指令如下所示：

cd C:\work\testCode\gulp

$ npm install gulp --save-dev

上述指令将gulp安装到本地端的项目目录内，并记录到package.json内的devDependencies。

安装gulp外挂

安装gulp外挂用以完成下列任务：

编译Sass (gulp-ruby-sass)

Autoprefixer (gulp-autoprefixer)

缩小化(minify)CSS (gulp-minify-css)

JSHint (gulp-jshint)

拼接 (gulp-concat)

丑化(Uglify) (gulp-uglify)

图片压缩 (gulp-imagemin)

即时重整(LiveReload) (gulp-livereload)

清理档案 (gulp-clean)

图片快取，只有更改过得图片会进行压缩 (gulp-cache)

更动通知 (gulp-notify)

执行下列指令来安装这些外挂:

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

指令将会安装必要的外挂，并记录到package.json内的devDependencies。

载入外挂

载入外挂，需要新建一个gulpfile.js文件，然后输入以下代码：

<
4000
code class=" hljs oxygene">var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');

自动载入外挂请参考gulp自动载入外挂

建立任务

编译Sass，Autoprefix及缩小化

首先，我们设置编译Sass。我们将编译Sass、接著通过Autoprefixer，最后储存结果到我们的目的地。接著产生一个缩小化的.min版本、自动重新整理页面及通知任务已经完成：

gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});

说明：

1.gulp.task API用来建立任务。可以透过终端机输入$ gulp styles指令来执行上述任务。

gulp.task('styles', function() { ... )};

2.gulp.src API用来定义一个或多个来源档案。允许使用glob样式，例如/*/.scss比对多个符合的档案。传回的串流(stream)让它成为非同步机制，所以在我们收到完成通知之前，确保该任务已经全部完成。

return gulp.src('src/styles/main.scss')

3.使用pipe()串流来源档案到某个外挂。外挂的选项通常在它们各自的Github页面中可以找到。

.pipe(sass({ style: 'expanded' }))

4.gulp.dest()API是用来设定目的路径。一个任务可以有多个目的地，一个用来输出扩展的版本，一个用来输出缩小化的版本。这个在上述的styles任务中已经有展示，只是目的路径一致，文件名不同罢了。

.pipe(gulp.dest('dist/assets/css'));

关于gulp的API，可参考API说明。

JSHint，拼接及缩小化JavaScript

接下来，我们将设定脚本任务，包括lint、拼接及丑化:

gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});

一件事提醒，我们需要指定JSHint一个reporter。这里我使用预设的reporter，适用于大多数人。更多有关此设定，你可以在JSHint网站取得。

图片压缩

设定图片压缩:

gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('dist/assets/img'))
.pipe(notify({ message: 'Images task complete' }));
});

这会将对所有来源图片进行imagemin处理。我们可以稍微更进一步，利用快取保存已经压缩过的图片，以便每次进行此任务时不需要再重新压缩。这裡只需要gulp-cache外挂–稍早已经安装。我们需要额外设置才能使用这个外挂，因此修改这段程式码:

.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))

修改为：

.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))

现在只有新的或更动的图片会被压缩。

重建目的地目录

在我们进行佈署之前，清除目的地目录并重建档案是一个好主意–以防万一任何已经被删除的来源档案遗留在目的地目录之中:

gulp.task('clean', function() {
return gulp.src(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], {read: false})
.pipe(clean());
});

我们可以传入一个目录(或档案)阵列到gulp.src。因为我们不想要读取已经被删除的档案，我们可以加入read: false选项来防止gulp读取档案内容–让它快一些。

预设任务

我们可以建立一个预设任务，当只输入$ gulp指令时执行的任务，这里执行三个我们所建立的任务:

gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});

注意额外传入gulp.task的阵列。这里我们可以定义任务相依(task dependencies)。在这个范例中，gulp.start开始任务前会先执行清理(clean)任务。Gulp中所有的任务都是并行(concurrently)执行，并没有先后顺序哪个任务会先完成，所以我们需要确保clean任务在其他任务开始前完成。

注意: 透过相依任务阵列来执行clean而非gulp.start是经过考虑的，在这个情境来看是最好的选择，以确保清理任务全部完成。

看守

为了能够看守档案，并在更动发生后执行相关任务，首先需要建立一个新的任务，使用gulp.watchAPI来看守档案:

gulp.task('watch', function() {
// 看守所有.scss档
gulp.watch('src/styles/**/*.scss', ['styles']);
// 看守所有.js档
gulp.watch('src/scripts/**/*.js', ['scripts']);
// 看守所有图片档
gulp.watch('src/images/**/*', ['images']);
});

透过gulp.watch指定想要看守的档案，并且透过相依任务阵列定义任务。执行$ gulp watch来开始看守档案，任何.scss、.js或图片档案一旦有了更动，便会执行相对应的任务。

即时重整(LiveReload)

Gulp也可以处理档案更动后，自动重新整理页面。我们需要修改watch任务，设置即时重整伺服器。

gulp.task('watch', function() {
// 建立即时重整伺服器
var server = livereload();
// 看守所有位在 dist/  目录下的档案，一旦有更动，便进行重整
gulp.watch(['dist/**']).on('change', function(file) {
server.changed(file.path);
});
});

为了让这个功能有效，除了伺服器之外，还需要安装并启用LiveReload的浏览器外挂。

完整的gulpfile

// 载入外挂
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
less = require('gulp-less');

// 样式
gulp.task('styles', function() {
//sass
gulp.src('src/css/**/*.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/css'))
.pipe(notify({ message: 'Styles task for sass complete' }));
//less
gulp.src('src/css/**/*.less')
.pipe(less({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss()
afbb
)
.pipe(gulp.dest('dist/css'))
.pipe(notify({ message: 'Styles task for less complete' }));
});

// 脚本
gulp.task('scripts', function() {
return gulp.src('src/js/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});

// 图片
//gulp.task('images', function() {
//    return gulp.src('src/img/**/*')
//        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
//        .pipe(gulp.dest('dist/img'))
//        .pipe(notify({ message: 'Images task complete' }));
//});

// 清理
gulp.task('clean', function() {
return gulp.src(['dist/css', 'dist/js', 'dist/img'], {read: false})
.pipe(clean());
});

// 预设任务
gulp.task('default', ['clean'], function() {
//gulp.start('styles', 'scripts', 'images');
gulp.start('styles', 'scripts');
});

// 看手
gulp.task('watch', function() {
// 看守所有.scss档
gulp.watch('src/css/**/*.scss', ['styles']);
// 看守所有.js档
gulp.watch('src/js/**/*.js', ['scripts']);
// 看守所有图片档
//gulp.watch('src/img/**/*', ['images']);
// 建立即时重整伺服器
var server = livereload();
// 看守所有位在 dist/  目录下的档案，一旦有更动，便进行重整
gulp.watch(['dist/**']).on('change', function(file) {
server.changed(file.path);
});
});