使用Gulp连接和隐藏文件
我试着用吞咽来:使用Gulp连接和隐藏文件,gulp,Gulp,我试着用吞咽来: 获取3个特定的javascript文件,连接它们,然后将结果保存到一个文件(concat.js) 获取这个连接的文件并对其进行uglify/缩小,然后将结果保存到另一个文件(uglify.js) 到目前为止,我有以下代码 var gulp = require('gulp'), gp_concat = require('gulp-concat'), gp_uglify = require('gulp-uglify'); gulp.
var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_uglify = require('gulp-uglify');
gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_concat('concat.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('js'));
});
gulp.task('default', ['js-fef'], function(){});
但是,丑陋的操作似乎不起作用,或者由于某种原因没有生成文件
要实现这一点,我需要做些什么?事实证明,我需要使用
gulp rename
并在“uglification”之前首先输出连接的文件。代码如下:
var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_uglify = require('gulp-uglify');
gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('uglify.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['js-fef'], function(){});
从grunt
开始有点混乱,但现在有了意义。我希望这有助于吞咽noobs
如果您需要sourcemaps,以下是更新的代码:
var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_uglify = require('gulp-uglify'),
gp_sourcemaps = require('gulp-sourcemaps');
gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_sourcemaps.init())
.pipe(gp_concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('uglify.js'))
.pipe(gp_uglify())
.pipe(gp_sourcemaps.write('./'))
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['js-fef'], function(){});
有关选项和配置的更多信息,请参见。2015年6月10日:来自gulp uglifyjs
作者的注释:
已弃用:此插件已被列入黑名单,因为它依赖于Uglify来解析文件,而不是使用gulp concat,这打破了“它应该做一件事”的范式。当我创建这个插件时,没有办法让源地图与gulp一起工作,但是现在有一个gulp sourcemaps插件实现了同样的目标。gulp uglifyjs仍然工作得很好,并且对Uglify的执行提供了非常精细的控制,我只是给你一个提示,其他选项现在已经存在
2015年2月18日:gulp uglify
和gulp concat
现在都能很好地与gulp sourcemaps
配合使用。只需确保为gulpconcat
正确设置newLine
选项即可;我推荐\n代码>
原始答案(2014年12月):改用<代码>大口喝浓缩咖啡
不一定安全;它需要正确处理尾部分号gulpuglify
也不支持源地图。下面是我正在从事的一个项目的一个片段:
gulp.task('scripts', function () {
gulp.src(scripts)
.pipe(plumber())
.pipe(uglify('all_the_things.js',{
output: {
beautify: false
},
outSourceMap: true,
basePath: 'www',
sourceRoot: '/'
}))
.pipe(plumber.stop())
.pipe(gulp.dest('www/js'))
});
使用gulp uglify
、gulp concat
和gulp sourcemaps
的解决方案。这是我正在做的一个项目
gulp.task('scripts', function () {
return gulp.src(scripts, {base: '.'})
.pipe(plumber(plumberOptions))
.pipe(sourcemaps.init({
loadMaps: false,
debug: debug,
}))
.pipe(gulpif(debug, wrapper({
header: fileHeader,
})))
.pipe(concat('all_the_things.js', {
newLine:'\n;' // the newline is needed in case the file ends with a line comment, the semi-colon is needed if the last statement wasn't terminated
}))
.pipe(uglify({
output: { // http://lisperator.net/uglifyjs/codegen
beautify: debug,
comments: debug ? true : /^!|\b(copyright|license)\b|@(preserve|license|cc_on)\b/i,
},
compress: { // http://lisperator.net/uglifyjs/compress, http://davidwalsh.name/compress-uglify
sequences: !debug,
booleans: !debug,
conditionals: !debug,
hoist_funs: false,
hoist_vars: debug,
warnings: debug,
},
mangle: !debug,
outSourceMap: true,
basePath: 'www',
sourceRoot: '/'
}))
.pipe(sourcemaps.write('.', {
includeContent: true,
sourceRoot: '/',
}))
.pipe(plumber.stop())
.pipe(gulp.dest('www/js'))
});
这将合并并压缩所有脚本
,将它们放入名为all\u theu things.js的文件中。文件将以一个特殊的行结束
//# sourceMappingURL=all_the_things.js.map
这会告诉你的浏览器去寻找地图文件,它也会把它写出来。我的gulp文件会生成一个最终编译的bundle-min.js,希望这对其他人有所帮助
//Gulpfile.js
var gulp = require("gulp");
var watch = require("gulp-watch");
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var del = require("del");
var minifyCSS = require("gulp-minify-css");
var copy = require("gulp-copy");
var bower = require("gulp-bower");
var sourcemaps = require("gulp-sourcemaps");
var path = {
src: "bower_components/",
lib: "lib/"
}
var config = {
jquerysrc: [
path.src + "jquery/dist/jquery.js",
path.src + "jquery-validation/dist/jquery.validate.js",
path.src + "jquery-validation/dist/jquery.validate.unobtrusive.js"
],
jquerybundle: path.lib + "jquery-bundle.js",
ngsrc: [
path.src + "angular/angular.js",
path.src + "angular-route/angular-route.js",
path.src + "angular-resource/angular-resource.js"
],
ngbundle: path.lib + "ng-bundle.js",
//JavaScript files that will be combined into a Bootstrap bundle
bootstrapsrc: [
path.src + "bootstrap/dist/js/bootstrap.js"
],
bootstrapbundle: path.lib + "bootstrap-bundle.js"
}
// Synchronously delete the output script file(s)
gulp.task("clean-scripts", function (cb) {
del(["lib","dist"], cb);
});
//Create a jquery bundled file
gulp.task("jquery-bundle", ["clean-scripts", "bower-restore"], function () {
return gulp.src(config.jquerysrc)
.pipe(concat("jquery-bundle.js"))
.pipe(gulp.dest("lib"));
});
//Create a angular bundled file
gulp.task("ng-bundle", ["clean-scripts", "bower-restore"], function () {
return gulp.src(config.ngsrc)
.pipe(concat("ng-bundle.js"))
.pipe(gulp.dest("lib"));
});
//Create a bootstrap bundled file
gulp.task("bootstrap-bundle", ["clean-scripts", "bower-restore"], function () {
return gulp.src(config.bootstrapsrc)
.pipe(concat("bootstrap-bundle.js"))
.pipe(gulp.dest("lib"));
});
// Combine and the vendor files from bower into bundles (output to the Scripts folder)
gulp.task("bundle-scripts", ["jquery-bundle", "ng-bundle", "bootstrap-bundle"], function () {
});
//Restore all bower packages
gulp.task("bower-restore", function () {
return bower();
});
//build lib scripts
gulp.task("compile-lib", ["bundle-scripts"], function () {
return gulp.src("lib/*.js")
.pipe(sourcemaps.init())
.pipe(concat("compiled-bundle.js"))
.pipe(gulp.dest("dist"))
.pipe(rename("compiled-bundle.min.js"))
.pipe(uglify())
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("dist"));
});
我们正在使用下面的配置来执行类似的操作
var gulp = require('gulp'),
async = require("async"),
less = require('gulp-less'),
minifyCSS = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
gulpDS = require("./gulpDS"),
del = require('del');
// CSS & Less
var jsarr = [gulpDS.jsbundle.mobile, gulpDS.jsbundle.desktop, gulpDS.jsbundle.common];
var cssarr = [gulpDS.cssbundle];
var generateJS = function() {
jsarr.forEach(function(gulpDSObject) {
async.map(Object.keys(gulpDSObject), function(key) {
var val = gulpDSObject[key]
execGulp(val, key);
});
})
}
var generateCSS = function() {
cssarr.forEach(function(gulpDSObject) {
async.map(Object.keys(gulpDSObject), function(key) {
var val = gulpDSObject[key];
execCSSGulp(val, key);
})
})
}
var execGulp = function(arrayOfItems, dest) {
var destSplit = dest.split("/");
var file = destSplit.pop();
del.sync([dest])
gulp.src(arrayOfItems)
.pipe(concat(file))
.pipe(uglify())
.pipe(gulp.dest(destSplit.join("/")));
}
var execCSSGulp = function(arrayOfItems, dest) {
var destSplit = dest.split("/");
var file = destSplit.pop();
del.sync([dest])
gulp.src(arrayOfItems)
.pipe(less())
.pipe(concat(file))
.pipe(minifyCSS())
.pipe(gulp.dest(destSplit.join("/")));
}
gulp.task('css', generateCSS);
gulp.task('js', generateJS);
gulp.task('default', ['css', 'js']);
GulpDS文件示例如下:
{
jsbundle: {
"mobile": {
"public/javascripts/sample.min.js": ["public/javascripts/a.js", "public/javascripts/mobile/b.js"]
},
"desktop": {
'public/javascripts/sample1.js': ["public/javascripts/c.js", "public/javascripts/d.js"]},
"common": {
'public/javascripts/responsive/sample2.js': ['public/javascripts/n.js']
}
},
cssbundle: {
"public/stylesheets/a.css": "public/stylesheets/less/a.less",
}
}
您的解决方案不起作用,因为您需要在concat进程之后保存文件,然后再次保存。您不需要在concat和uglify之间重命名文件。FYI,您在concat.js之前缺少一个引号。gulp.task
中return语句后的行应该是:.pipe(gp_concat('concat.js'))
所有文件都会生成,但是在调试器中我仍然可以看到缩小的版本。原因可能是什么?地图文件命名正确,可以通过其URL访问。它将根据浏览器的不同而不同。原始源位于不同的选项卡上。你们需要把断点放在那个里。我不清楚为什么我们需要重命名?这是一个bug还是?@przemcio在我的例子中,我想要一个过程中每个步骤的所有文件的记录。但是,如果您所关心的只是最终的缩小文件,那么您当然可以进一步缩短压缩文件,是吗?gulp uglify肯定支持源代码映射:@MisterOh不确定在撰写本文时是否支持,或者如果支持,则可能是gulp concat
没有支持源代码映射(gulp uglify
不允许您缩小多个文件,因此您必须首先进行concat)。另外,默认情况下,gulp concat
使用\r\n
,如果JS文件没有正确终止,可能会导致问题。但是,是的,现在有了支持,可能最好还是走这条路,因为它更灵活。@Mark-如果您能发布与Obinwanne的答案一致的gulp sourcemaps解决方案,我将不胜感激。我似乎无法让它工作。@NightOwl888实际上,如果你是这么要求的话,它不会生成内联源地图;它仍然是一个单独的文件。gulp-uglifyjs现在也被依赖。现在只要使用GulpUglify插件就足够了。查看最新解决方案的其他答案。惊讶于还没有看到它,所以我只想快速指出,目标本身有点违背了吞咽的哲学。编写中间文件更像是一种单调乏味的工作方式。大口喝可以促进水流,提高速度。但我相信问这个问题的人有他的理由:)。我知道这是一个旧线程,但我已经制作了一个npm模块,使用yaml文件可以非常轻松地完成这类工作。看看:。很好的例子@wchoward这正是我想要的,非常简洁明了的设计。我想说的是,开发者有权决定在使用gulp时做什么和不需要什么。在我的例子中,我想在每个步骤中重命名文件。当然,你可以决定什么是最适合你的选择。我明白了,下面的答案说你们需要重命名文件,我只是说你们不需要(这不是强制性的),对不起,若我搞混了。
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('create-vendor', function () {
var files = [
'bower_components/q/q.js',
'bower_components/moment/min/moment-with-locales.min.js',
'node_modules/jstorage/jstorage.min.js'
];
return gulp.src(files)
.pipe(concat('vendor.js'))
.pipe(gulp.dest('scripts'))
.pipe(uglify())
.pipe(gulp.dest('scripts'));
});