全局安装

npm install --g gulp

当前项目安装

npm install --save-dev gulp

安装常用扩展

npm install --save-dev gulp-uglify #压缩js
npm install --save-dev gulp-minify-css #压缩css
npm install --save-dev gulp-concat #合并文件
npm install --save-dev gulp-less #编译less
npm install --save-dev gulp-rename #重命名文件
npm install --save-dev gulp-header #文件增加banner
npm install --save-dev gulp-jshint #检查js语法

当然了,使用一个package.json来一次安装所有扩展更方便。

{
    "name": "News",
    "URI": "www.reqianduan.com",
    "description": "一对一高质量WordPress主题定制。联系:themes@xiguabaobao.com",
    "author": "西瓜宝宝主题",
    "authorURI": "http://themes.xiguabaobao.com",
    "version": "1.1.0",
    "devDependencies": {
        "gulp": "^3.8.5",
        "gulp-uglify": "^1.0.1",
        "gulp-minify-css": "^0.3.7",
        "gulp-less": "latest",
        "gulp-concat": "^2.3.4",
        "gulp-header": "^1.0.5",
        "gulp-rename": "^1.2.0",
        "gulp-jshint": "^1.6.3"
    }
}

配置任务

在项目根目录创建一个叫gulpfile.js的配置文件。

一个基本的任务

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

gulp.task('default', function () {
    gulp.src('js/common.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(uglify())
        .pipe(concat('common.js'))
        .pipe(gulp.dest('build'))
});

watch监视文件变化

gulp.task('watch', function () {
   gulp.watch('js/common.js', ['default']);
});

上面的任务监视js/common.js文件,并执行default任务。

此乃笔记,未完待续。