Gulp系列教程:Build,Clean和Jekyll

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

这是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.htmljordans for sale UK

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

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部