Justin's Words

gulp.js 基础

Posted on | In |

想了解 gulpjs 是什么可以看官网。

引入

我已经写好一个项目的 gulpfile.js，其中用到的 gulpjs 插件包括 gulp-less、gulp-coffee、gulp-util、webpack、gulp-uglify、gulp-rename。

首先写好 package.json：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "name": "gulp-example",
    "author": "youngdze",
    "devDependencies": {
    "coffee-script": "^1.10.0",
    "gulp": "^3.9.0",
    "gulp-coffee": "^2.3.1",
    "gulp-jshint": "^1.11.2",
    "gulp-less": "^3.0.3",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^1.4.0",
    "gulp-util": "^3.0.6",
    "gulp-watch": "^4.3.5",
    "webpack": "^1.12.1"
    },
    "scripts": {
    "prestart": "gulp",
    "start": "node --harmony server.js"
    }
}

npm install 先安装。

安装完成后在 gulpfile.js 引入：

1
2
3
4
5
6
7
8
9
10
"use strict";

var gulp = require('gulp');
var less = require('gulp-less');
var coffee = require('gulp-coffee');
var gutil = require('gulp-util');
var webpack = require('webpack');
var webpackConfig = require('./webpack.config.js');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

其中 webpack.config.js 需要具体了解请去看 webpack 官网解释，我的内容如下：

1
2
3
4
5
6
7
8
9
10
"use strict";

module.exports = {
    context:__dirname + "/public",
    entry  :["./src/getFruits.js", "./src/id3.js"],
    output :{
    path    :__dirname + "/public/build",
    filename:"./bundle.js"
    }
};

gulp task

其实 gulp task 的写法基本一样的，不过像 webpack 的不一样，以下会说明。

gulp-less

gulp.src 读取开发目录，pipe 指明任务，gulp.dest 指明保存目录。

像这些插件详细的配置可以去它们官方文档查看。

1
2
3
4
5
6
7
8
9
10
gulp.task('less', function(){
    return gulp.src('public/src/*.less')
    .pipe(less({
        globalVars:{
        ENV: 'dev',
        version: 10
        }
    }))
    .pipe(gulp.dest('public/build'));
});
gulp-coffee
1
2
3
4
5
6
gulp.task('coffee', function(){
    return gulp.src('public/src/*.coffee')
    .pipe(coffee({bare: true}))
    .on('error', gutil.log)
    .pipe(gulp.dest('public/src'));
});
webpack

webpack 没有对应的 gulpjs 查看，所以这里用的是 webpack 官方提供的写法：

1
2
3
4
5
6
7
gulp.task('webpack', function( callback ){
    return webpack(webpackConfig, function( err, stats ){
    if(err) throw new gutil.PluginError('webpack', err);
    gutil.log('[webpack]', stats.toString({}));
    callback();
    });
});
gulp-uglify

这里是压缩功能，包括用 gulp-rename 修改生成文件的后缀：

1
2
3
4
5
6
7
8
gulp.task('compress', function(){
    return gulp.src('public/build/bundle.js')
    .pipe(uglify())
    .pipe(rename({
        extname:'.min.js'
    }))
    .pipe(gulp.dest('public/build'));
});

default

如果没有写好 gulp.task('default') 就要指定 gulp 运行的参数，比如 gulp compress，写好只要 gulp 即可统一执行：

1
2
3
4
5
6
gulp.task('default', ['less', 'coffee', 'webpack', 'compress'], function(){
    gulp.watch('public/src/*.less', ['less']);
    gulp.watch('public/src/*.coffee', ['coffee']);
    gulp.watch('public/src/*.js', ['webpack']);
    gulp.watch('public/build/bundle.js', ['compress']);
});