Gulp系列教程:产品构建,预览和Jekyll

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

这是Gulp系列教程的第十一部分。今天我将编写生产代码构建任务,设置一个服务器来浏览生产代码并用Jekyll来创建生产站点。

开发过程中我使用default这个 Gulp.js任务来运行开发服务器,构建资源和监听改变。对于生产构建过程我需要另一个入口点。

我决定把任务命名为publish。稍后我可以用gulp publish命令执行生产构建过程。

//gulp/tasks/publish.js 

var gulp = require('gulp');

/**
 * Run task browsersync:production
 */
gulp.task('publish', ['browsersync:production']);

我把这个文件与default.js文件放在同一级目录。这个任务简短精悍:它只做了一件事。启动生产构建的BrowserSync任务。这样我可以在发布到服务器前查看生产站点。

构建的BrowserSync

所有生产任务都在gulp/tasks/里的production/目录中。开发和生产任务名一致但位于不同目录。

//gulp/config.js 

browsersync: {
  development: {
    ...
  },
  production: {
    server: {
      baseDir: [production]
    },
    port: 9998
  }
}

browser sync任务和development任务的唯一区别是:我只把生产目录当作服务器目录并给服务器设置了一个不同的端口。这样我可以同时运行development任务和production`任务。

//gulp/tasks/production/browser-sync.js

var gulp        = require('gulp');
var browsersync = require('browser-sync');
var config      = require('../../config').browsersync.production;

/**
 * Start a server and watch changes with BrowserSync
 */
gulp.task('browsersync:production', ['build:production'], function() {
  browsersync(config);
});

这个任务很无聊。它只是启动生产构建过程。

生产构建任务

// gulp/tasks/production/build.js

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

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

这个任务还有很多事需要做:我用run-sequence来按特定顺序运行任务。首先我会删除资源目录。接下来运行生产的Jekyll构建任务,像开发过程中一样创建生产资源。结束之后我开始优化资源和修订文件。

Jekyll任务

这个Jekyll任务除了两点之外很类似:我把站点创建在生产目录并且添加了另一个配置文件_config.build.yml作为配置项(注意,两个文件间没有空格)

Jekyll生产配置仅仅覆盖了一些值例如url,隐藏未来才发布的文章(future: false)或隐藏草稿(show_drafts: false)。

使用Jekyll加速开发

要加速开发过程中生成站点的速度,你可以设置limit_post: 5,这样只会生成最近的五篇文章。另外我会设置future:  ture以及show_drafts: true来预览草稿和文章。

// gulp/config.js 

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

//gulp/tasks/production/jekyll.js

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

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

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

源代码

在GitHub上查看源码

总结

这是Gulp系列教程的第十一部分的总结。今天我开始编写网站的生产代码,包括预览生产站点的服务器,以及生成Jekyll站点的生产版本。

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

Blueed

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

如需转载,烦请注明出处:http://www.w3cplus.com/workflow/gulp-tutorial-11-production-build-server-and-jekyll.htmlNike Epic React Presto 19SS Olive Green Yellow Black White AQ2268-004

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

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

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