刚学习Gulp。看起来很棒,但我无法找到有关如何使用它进行完整分发的任何信息。
让我们说我想使用Gulp来连接和缩小我的CSS和JS,并优化我的图像。
这样做我在构建目录中更改了JS脚本的位置(例如,从 bower_components / jquery / dist / jquery.js 到 js / jquery.js )。
如何自动更新构建HTML / PHP文档以引用正确的文件?执行此操作的标准方法是什么?
如何复制其余的项目文件?。这些文件需要作为发布的一部分包含在内,例如HTML,PHP,各种txt,JSON和各种其他文件。当我每次使用Gulp进行干净的构建时,我不必复制和粘贴我的开发目录中的那些吗?
很抱歉询问可能非常难以理解的问题。可能我应该使用Gulp之外的其他东西来管理这些,但我不知道从哪里开始。
非常感谢提前。
答案 0 :(得分: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));
});
它具有连接和缩小生产所有内容的优点,同时包含用于测试目的的每个文件,以保持错误行号一致。
使用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)
几年后松散地回答我自己的问题:
- 如何自动更新构建HTML / PHP文档以引用正确的文件?这样做的标准方法是什么?
醇>
始终链接到dist版本,但确保创建源映射,因此源代码易于调试。当然,手表任务是必须的。
- 如何复制其余的项目文件?这些文件需要作为发布的一部分包含在内,例如HTML,PHP,各种txt,JSON和各种其他文件。当我每次使用Gulp进行干净的构建时,我不必复制和粘贴我的开发目录中的那些文件吗?
醇>
这通常不是问题,因为没有提供太多文件。除了repo之外,通常还会保留大文件和配置。