gulp - 我应该如何使用 Gulp 创建一个完整的构建？

Question

刚学 Gulp。看起来不错，但我找不到有关如何使用它进行完整分发的任何信息。

假设我想使用 Gulp 连接和缩小我的 CSS 和 JS，并优化我的图像。

这样做时，我更改了构建目录中 JS 脚本的位置(例如，从 bower_components/jquery/dist/jquery.js 到 js/jquery.js)。

如何自动更新我的构建 HTML/PHP 文档以引用正确的文件？ 这样做的标准方法是什么？

如何复制其余的项目文件？ .这些是需要作为分发的一部分包含的文件，例如 HTML、PHP、各种 txt、JSON 和各种其他文件。每次我用 Gulp 进行干净的构建时，我肯定不必从我的开发目录中复制和粘贴那些吗？

很抱歉问什么可能是非常n00bish 的问题。我可能应该使用 Gulp 以外的其他东西来管理这些，但我不确定从哪里开始。

提前谢谢了。

Answer 1

第 1 点

我用来实现这一目标的方式:

var scripts = [];
function getScriptStream(dir) { // Find it as a gulp module or create it
  var devT = new Stream.Transform({objectMode: true});
  devT._transform = function(file, unused, done) {
    scripts.push(path.relative(dir, file.path));
    this.push(file);
    done();
  };
  return devT;
}

// Bower
gulp.task('build_bower', function() {
  var jsFilter = g.filter('**/*.js');
  var ngFilter = g.filter(['!**/angular.js', '!**/angular-mocks.js']);
  return g.bowerFiles({
    paths: {
      bowerDirectory: src.vendors
    },
    includeDev: !prod
  })
    .pipe(ngFilter)
    .pipe(jsFilter)
    .pipe(g.cond(prod, g.streamify(g.concat.bind(null, 'libs.js'))))
    .pipe(getScriptStream(src.html))
    .pipe(jsFilter.restore())
    .pipe(ngFilter.restore())
    .pipe(gulp.dest(build.vendors));
});

// JavaScript
gulp.task('build_js', function() {

  return gulp.src(src.js + '/**/*.js', {buffer: buffer})
    .pipe(g.streamify(g.jshint))
    .pipe(g.streamify(g.jshint.reporter.bind(null, 'default')))
    .pipe(g.cond(prod, g.streamify(g.concat.bind(null,'app.js'))))
    .pipe(g.cond(
      prod,
      g.streamify.bind(null, g.uglify),
      g.livereload.bind(null, server)
    ))
    .pipe(gulp.dest(build.js))
    .pipe(getScriptStream(build.html));
});

// HTML
gulp.task('build_html', ['build_bower', 'build_js', 'build_views',
    'build_templates'], function() {
  fs.writeFile('scripts.json', JSON.stringify(scripts));
  return gulp.src(src.html + '/index.html'  , {buffer: true})
    .pipe(g.replace(/(^\s+)<!-- SCRIPTS -->\r?\n/m, function($, $1) {
      return $ + scripts.map(function(script) {
        return $1 + '<script type="text/javascript" src="'+script+'"></script>';
      }).join('\n') + '\n';
    }))
    .pipe(gulp.dest(build.html));
});

它具有连接和缩小用于生产的所有内容的优点，同时包括 每用于测试目的的文件保持错误行号一致。

第 2 点

使用 gulp 复制文件就像这样做一样简单:

gulp.src(path).pipe(gulp.dest(buildPath));

奖金

我通常通过创建一个“构建”分支并在生产服务器中克隆她来进行部署。我为此创建了 buildbranch:

// Publish task
gulp.task('publish', function(cb) {
  buildBranch({
    branch: 'build',
    ignore: ['.git', '.token', 'www', 'node_modules']
  }, function(err) {
    if(err) {
      throw err;
    }
    cb();
  });
});