第1点

Question

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

让我们说我想使用Gulp来连接和缩小我的CSS和JS，并优化我的图像。

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

如何自动更新构建HTML / PHP文档以引用正确的文件？执行此操作的标准方法是什么？
如何复制其余的项目文件？。这些文件需要作为发布的一部分包含在内，例如HTML，PHP，各种txt，JSON和各种其他文件。当我每次使用Gulp进行干净的构建时，我不必复制和粘贴我的开发目录中的那些吗？

很抱歉询问可能非常难以理解的问题。可能我应该使用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();
  });
});

Answer 2

几年后松散地回答我自己的问题：

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

始终链接到dist版本，但确保创建源映射，因此源代码易于调试。当然，手表任务是必须的。

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

这通常不是问题，因为没有提供太多文件。除了repo之外，通常还会保留大文件和配置。

我应该如何使用Gulp创建完整的构建？

2 个答案:

第1点

第2点

加成