gulp

gulp

中文站点Gulp 中文网

Gulp入门教程

转载自Gulp入门教程

Gulp基于Node.js的前端构建工具，通过Gulp的插件可以实现前端代码的编译（sass、less）、压缩、测试；图片的压缩；浏览器自动刷新

再打个比喻，Grunt的插件就像独立的工厂，这个工厂生成出来的产品打包封装好后再送到另一个工厂去加工，使用了Gulp后实现了工厂的合并，所有东西都在一个工厂里完成了

安装

首先我们要全局安装一遍：

$ npm install gulp -g

接着我们要进去到项目的根目录再安装一遍（确保你根目录存在package.json文件）：

$ npm install gulp --save-dev

—save-dev这个属性会将条目保存到你package.json的devDependencies里面

安装Gulp插件

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

• sass的编译（gulp-ruby-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）
• 清除文件（del）

安装这些插件需要运行如下命令：

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

上面是一些常用的插件，如果想要找更多的插件点击这里

加载插件

接着我们要创建一个gulpfile.js在根目录下，然后在里面加载插件：

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'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

Gulp的插件和Grunt有些许不一样，Grunt插件是为了更好的完成一项任务。就像Grunt的imagemin插件就利用了缓存来避免重复压缩，而Gulp要利用gulp-cache来完成，当然啦，不仅限定于缓存图片。

建立任务

编译sass、自动添加css前缀和压缩

首先我们编译sass，添加前缀，保存到我们指定的目录下面，还没结束，我们还要压缩，给文件添加.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' }));
});

让我解释一下：

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

gulp.task这个API用来创建任务，在命令行下可以输入$ gulp styles来执行上面的任务

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

gulp.src这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss, vender.scss]，也可以是正则表达式/**/*.scss

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

我们使用.pipe()这个API将需要处理的文件导向sass插件，那些插件的用法可以在github上找到，为了方便大家查找我已经在上面列出来了

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

gulp.dest()API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。

清除文件

在任务执行前，最好先清除之前生成的文件：

gulp.task('clean', function(cb) {
    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});

在这里没有必要使用Gulp插件了，可以使用NPM提供的插件。我们用一个回调函数（cb）确保在退出前完成任务。

设置默认任务（default）

我们在命令行下输入$ gulp执行的就是默认任务，现在我们为默认任务指定执行上面写好的三个任务：

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

在这个例子里面，clean任务执行完成了才会去运行其他的任务，在gulp.start()里的任务执行的顺序是不确定的，所以将要在它们之前执行的任务写在数组里面。

---

油管上视频的例子

1.压缩js代码
项目npm init后，创建src目录，然后：

npm install --save-dev gulp
npm install --save-dev gulp-uglify

后，在src目录下，创建first.js和second.js两个js文件
创建gulp的gulpfile.js文件

目录结构如下：

gulpfile.js文件内容如下：

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('scripts', function(){
    gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

scripts的任务是压缩src目录下的js代码，然后输出到dist目录下

在终端输入：$ gulp，会提示：

[16:16:26] Using gulpfile ~/Documents/Webstorm/gulp/demo01/gulpfile.js
[16:16:26] Task 'default' is not in your gulpfile
[16:16:26] Please check the documentation for proper gulpfile formatting

改为gulp.task('default', ....,终端显示：

[16:18:42] Using gulpfile ~/Documents/Webstorm/gulp/demo01/gulpfile.js
[16:18:42] Starting 'default'...
[16:18:42] Finished 'default' after 21 ms

项目的目录中多了个dist，而且js也被压缩了

但是如果我们不行改成default，继续使用scripts呢？该如何调用？

$ gulp scripts

2.concat合并js文件

$ npm install gulp-concat --save-dev

修改gulpfile.js如下，引入concat

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('scripts', function(){
    gulp.src('src/*.js')
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

$ gulp scripts后在dist中多了个all.min.js文件

function myFirstFunction(){return"first"}function mySecondFunction(){return"second"}

3.CoffeeScript to js

新建一个third.coffee

myThirdFunction = ->
    'third'

安装gulp-coffee

npm install gulp-coffee --save-dev

新建一个task coffee

var coffee = require('gulp-coffee');

gulp.task('coffee', function(){
    gulp.src('src/*.coffee')
    .pipe(coffee())
    .pipe(gulp.dest('src'))
})

$ gulp coffee后，转换的js文件如下：

(function() {
  var myThirdFunction;

  myThirdFunction = function() {
    return 'third';
  };

}).call(this);

把scripts修改成如下的形式

gulp.task('scripts', ['coffee'], function(){
    gulp.src('src/*.js')
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

表示的先执行coffee，再执行scripts，所以这个时候可以直接$ gulp scripts，在项目中可以看到已经创建成功了all.min.js文件，但是会发现没有third.js的内容，这是怎么回事呢？大神说你要记得return，来返回这stream，修改成如下：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var coffee = require('gulp-coffee');

gulp.task('coffee', function(){
    return gulp.src('src/*.coffee')
    .pipe(coffee())
    .pipe(gulp.dest('src'))
})

gulp.task('scripts', ['coffee'], function(){
    return gulp.src('src/*.js')
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});