Gulp系列教程：Build，Clean和Jekyll

作者：Blueed 日期：2015-12-21 点击：1684
Gulp系列教程
gulp
workflow
工作流

这是Gulp系列教程的第三部分。今天我想谈一谈build任务，这个任务会执行一个构建过程所需的其它任务，例如清空资源文件以及创建个人Jekyll站点。

Build

现在我创建一个build任务。它会执行所有其它任务，这些任务是创建站点必须的。Gulp.js默认同时运行所有任务。因此当需要特定顺序时我就遇到了问题。我需要一个node模块按顺序执行任务。

$ npm install --save-dev run-sequence@1.1.4

下一步我创建这个任务：

var gulp        = require('gulp');
var runSequence = require('run-sequence');

/**
 * Run all tasks needed for a build in defined order
 */
gulp.task('build', function(callback) {
  runSequence('delete',
  [
    'jekyll',
    'sass',
    'scripts',
    'images',
    'copy:fonts'
  ],
  'base64',
  callback);
});

这个任务首先会删除assets目录（默认删除Jekyll），然后同时创建Jekyll site，用Sass编译CSS文件，打包JavaScript文件，把图片拷贝进资源目录并拷贝矢量字体。完成sass任务后把链接替换成Base64编码的PNG文件来内嵌入CSS文件。

你应该先把任务注释，目前为止还没写完，Gulp也无法运行。我只是先提一下之后就不需要回顾每个任务并且新增一行。

删除Assets

我使用node模块del来清空asset目录里的所有文件。

$ npm install --save-dev del@0.1.3

我需要添加一个清理的配置：

browsersync: {
...
},
delete: {
  src: [developmentAssets]
}

从现在起我会缩短所有配置项。每个任务都有各自的选项区块。它们是JavaScript对象,所以添加新的配置项时不要忘了结尾逗号。

实际上任务如下所示：

var gulp   = require('gulp');
var del    = require('del');
var config = require('../../config').delete;

/**
 * Delete folders and files
 */
gulp.task('delete', function(callback) {
  del(config.src, callback);
});

如果你的del版本较新或碰到了问题，因为del任务没有完成，尝试删除函数中的callback方法。

Jekyll

接下来我要编写创建Jekyll站点的配置和任务：

jekyll: {
  development: {
    src:    src,
    dest:   development,
    config: '_config.yml'
  }
}

var gulp        = require('gulp');
var cp          = require('child_process');
var browsersync = require('browser-sync');
var config      = require('../../config').jekyll.development;

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll', function(done) {
  browsersync.notify('Compiling Jekyll');

  return cp.spawn('bundle', ['exec', 'jekyll', 'build', '-q', '--source=' + config.src, '--destination=' + config.dest, '--config=' + config.config], { stdio: 'inherit' })
  .on('close', done);
});

gulp.task('jekyll-rebuild', ['jekyll'], function() {
  browsersync.reload();
});

Jekyll有gulp插件，但它还是开发版并且被列入了黑名单，因为它不是必要的,你可以用node运行命令行任务。但是当任务完成时我还是要发送done状态。

这个任务的功能是运行带某些参数的jekyll build命令。我的源文件目录为app，目标目录为build/development并指向_config.yml文件。

我总是把_config.yml和其他配置文件放在项目的根目录中。如果你不喜欢这种做法，你需要更新配置文件来指定_config.yml文件的路径。

是否需要打包 请注意：如果没有用Gemfile来安装Jekyllname你需要修改Jekyll任务并移除bundle exec部分。修改return cp.spawn('bundle', ['exec', 'jekyll' …为return cp.spawn('jekyll', ['build', '-q' …。所以其他选项都是一样的。

还有另一个Jekyll构建任务jekyll-rebuild，只是重建的一个容器。它的功能只是在构建完成时刷新浏览器。

源代码

在Github上查看源码

总结

这是Gulp系列教程的第三部分的总结。我们学习了如何使用run-sequence命令按照 特定顺序运行文件，如何删除文件和目录以及如何执行命令行任务,例如Jekyll。

本文根据@Stefan Imhoff的《Introduction to Gulp.js 3: Build, Clean and Jekyll》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://stefanimhoff.de/2014/gulp-tutorial-3-build-clean-jekyll/。

Blueed

现居上海。正在学习前端的道路上，欢迎交流。个人博客：Blueed.me,微博：@Ivan_z3

如需转载，烦请注明出处：http://www.w3cplus.com/workflow/gulp-tutorial-3-build-clean-jekyll.html

返回顶部