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

时间:2014-03-21 09:52:17

标签: gulp

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


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

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

  1. 如何自动更新构建HTML / PHP文档以引用正确的文件?执行此操作的标准方法是什么?

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


  3. 很抱歉询问可能非常难以理解的问题。可能我应该使用Gulp之外的其他东西来管理这些,但我不知道从哪里开始。

    非常感谢提前。

2 个答案:

答案 0 :(得分: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();
  });
});

答案 1 :(得分:0)

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

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

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

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

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