Gulp系列教程：产品构建，预览和Jekyll

作者：Blueed 日期：2016-01-21 点击：2011
gulp
Gulp系列教程
workflow
工作流

这是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.html

返回顶部