gulp 学习入门

[shushu2013]

gulp 学习

gulp 的基本安装和使用

参考: Gulp 中文网入门指南

插件

1、gulp-less: 编译 less
2、gulp-ejs: 编译 ejs
3、gulp-data: 获取数据
4、gulp-rename: 文件重命名
5、gulp-clean-css: 压缩 css
6、gulp-connect: 热更新
7、gulp-plumber: 错误处理

1、实现编译 less

1.1 安装 gulp-less

$ cnpm install gulp-less --save-dev

1.2 编写 task

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

// less 处理
gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css'));
});

1.3 运行 task

$ gulp less

2、实现编译 ejs 模版

从 JSON 文件中获取数据 + ejs 模版 => 编译为 html

2.1 安装 gulp-ejs、gulp-data

$ cnpm install gulp-ejs gulp-data --save-dev

2.2 编写 task

var gulp = require('gulp');
var ejs = require('gulp-ejs');
var data = require('gulp-data');

var path = require('path');
var fs = require('fs');

// getJsonData
var getJsonData = function(file) {
    // G:\workspace\glup-test\src\index.ejs
    // => src/temple/index.json
    var jsonFile = 'src/temple/' + path.basename(file.path, '.ejs') + '.json';
    var data = JSON.parse(fs.readFileSync(jsonFile));
    return data;
}

// ejs 处理
gulp.task('ejs', function() {
    return gulp.src('src/*.ejs')
        .pipe(data(getJsonData))
        .pipe(ejs({},{},{ext: '.html'}))
        .pipe(gulp.dest('./dist'));
});

2.3 运行 task

$ gulp ejs

3、实现文件监听

gulp.watch 会监听文件的修改，一旦有变化就会自动运行相应的任务。

3.1 设置监听任务

var gulp = require('gulp');
var less = require('gulp-less');
var ejs = require('gulp-ejs');
var data = require('gulp-data');

var path = require('path');
var fs = require('fs');

var srcPath = {
    less: 'src/less/*.less',
    ejs: 'src/*.ejs',
    json: 'src/temple/*.json'
};

var buildPath = {
    css: 'dist/css',
    html: 'dist'
};


// 默认执行的任务
gulp.task('default', ['less', 'ejs', 'watch'], function() {
    console.log('default task ok!');
})

// less 处理
gulp.task('less', function() {
    return gulp.src(srcPath.less)
        .pipe(less())
        .pipe(gulp.dest(buildPath.css))
        .pipe(connect.reload());
});

// getJsonData
var getJsonData = function(file) {
    // G:\workspace\glup-test\src\index.ejs
    // => src/temple/index.json
    var jsonFile = 'src/temple/' + path.basename(file.path, '.ejs') + '.json';
    var data = JSON.parse(fs.readFileSync(jsonFile));
    return data;
}
// ejs 处理
gulp.task('ejs', function() {
    return gulp.src(srcPath.ejs)
        .pipe(data(getJsonData))
        .pipe(ejs({},{},{ext: '.html'}))
        .pipe(gulp.dest(buildPath.html))
        .pipe(connect.reload());
});

// 监听任务
gulp.task('watch', function() {
    console.log('watch...')

    gulp.watch(srcPath.less, ['less']);   // 监听 less 文件
    gulp.watch(srcPath.ejs, ['ejs']);     // 监听 ejs 文件
    gulp.watch(srcPath.json, ['ejs']);    // 监听 json 文件
})

3.2 执行监听

$ gulp watch

// 或者(默认执行 default)
$ gulp

4、实现页面热更新

4.1 安装 gulp-connect

$ cnpm install gulp-connect --save-dev

4.2 注册热加载任务

// 热加载
gulp.task('webserver', function() {
    connect.server({
        root: ['dist'],  // 监控的目录
        port: 5000,      // 端口
        livereload: true    // 启用热加载
    });
});

4.3 文件改动时通知 livereload 刷新页面

// less 处理
gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css'))
        .pipe(connect.reload()); // css 文件更新后通知刷新页面
});

// ejs 处理
gulp.task('ejs', function() {
    return gulp.src('src/*.ejs')
        .pipe(data(getJsonData))
        .pipe(ejs({},{},{ext: '.html'}))
        .pipe(gulp.dest('./dist'))
        .pipe(connect.reload()); // html 文件更新后通知刷新页面
});

4.4 结合文件监听实现 文件改动实时刷新

/ 默认执行的任务
gulp.task('default', ['webserver', 'less', 'ejs', 'watch'], function() {
    console.log('default task ok!');
})

$ gulp  // 默认执行 default 任务

现在在浏览器中打开地址 locahost:5000，即可打开 dist 目录下的 index.html，当改动 less 或 ejs 文件并保存时，浏览器会自动刷新页面。

5、错误处理

5.1 安装 gulp-plumber

$ cnpm install gulp-plumber --save-dev

gulp-plumber 可以输出 gulp 插件发生的错误，并且进程不会退出。

5.2 使用

var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber');

gulp.task('less', function() {
  return gulp.src('less/*.less')
      .pipe(plumber())      // 在插件前使用
      .pipe(less())
      .pipe(gulp.dest('./dist/css'))
});

整合源码如下

var gulp = require('gulp');
var less = require('gulp-less');
var ejs = require('gulp-ejs');
var data = require('gulp-data');
var plumber = require('gulp-plumber');
var connect = require('gulp-connect');

var path = require('path');
var fs = require('fs');

var srcPath = {
    less: 'src/less/*.less',
    ejs: 'src/*.ejs',
    json: 'src/temple/*.json'
};

var buildPath = {
    css: 'dist/css',
    html: 'dist'
};


// 默认执行的任务
gulp.task('default', ['webserver', 'less', 'ejs', 'watch'], function() {
    console.log('default task ok!');
})

// 热加载
gulp.task('webserver', function() {
    connect.server({
        root: ['dist'],  // 监控的目录
        port: 5000,
        livereload: true
    });
});

// less 处理
gulp.task('less', function() {
    return gulp.src(srcPath.less)
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest(buildPath.css))
        .pipe(connect.reload());
});

// getJsonData
var getJsonData = function(file) {
    // G:\workspace\glup-test\src\index.ejs
    // => src/temple/index.json
    var jsonFile = 'src/temple/' + path.basename(file.path, '.ejs') + '.json';
    var data = JSON.parse(fs.readFileSync(jsonFile));
    return data;
}
// ejs 处理
gulp.task('ejs', function() {
    return gulp.src(srcPath.ejs)
        .pipe(plumber())
        .pipe(data(getJsonData))
        .pipe(ejs({},{},{ext: '.html'}))
        .pipe(gulp.dest(buildPath.html))
        .pipe(connect.reload());
});

// 监听任务
gulp.task('watch', function() {
    console.log('watch...')

    gulp.watch(srcPath.less, ['less']);   // 监听 less 文件
    gulp.watch(srcPath.ejs, ['ejs']);     // 监听 ejs 文件
    gulp.watch(srcPath.json, ['ejs']);    // 监听 json 文件
})

[shushu2013]

6、使用 gulp-webserver 实现本地服务器及热更新

6.1 安装 gulp-webserver

$ cnpm install gulp-webserver --save-dev

gulp-webserver 继承自 gulp-connect，增加了更多的功能

6.2 使用

参考：gulp-webserver

var webserver = require('gulp-webserver')

gulp.task('webserver', function() {
    gulp.src('dist')    // 监控的目录
        .pipe(webserver({
            port: 5000,
            livereload: true, // 监听文件变化，热更新
            open: true        // 运行任务时，自动打开浏览器
        }))
})

[shushu2013]

使用 gulp.src 和 gulp.dest 批量处理目录

参考：gulp API 文档

var gulp = require('gulp');
var path = require('path');

var srcPath = {
    otherSource: ['src/css/*.css', 'src/fonts/*', 'src/images/*', 'src/js/*.js']
};

var buildPath = {
    root: 'dist'
};

// other 任务，批量处理目录
gulp.task('other', function() {
    gulp.src(srcPath.otherSource)
        .pipe(gulp.dest(function(file) {
            // src/css/*.css => dist/css
            // src/fonts/* => dist/fonts
            var toPath = buildPath.root + '/' + path.basename(file.base);
            // console.log(toPath)
            return toPath;
        }))
})