使用Gulp连接和Uglify文件

我正尝试使用Gulp来：

1. 取3个特定的JavaScript文件，连接它们，然后将结果保存到文件（concat.js）
2. 把这个连接的文件和uglify / minify它，然后将结果保存到另一个文件（uglify.js）

到目前为止，我有以下代码

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(){}); 

但是，uglify操作似乎不起作用，或者由于某种原因不生成文件。

我需要做些什么才能做到这一点？

Answer 1

事实certificate，我需要使用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它起初有点混乱，但现在是有道理的。 我希望它可以帮助gulp小菜。

而且，如果你需要源代码，下面是更新的代码：

 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(){}); 

有关选项和configuration的更多信息，请参阅gulp-sourcemaps 。

Answer 2

我的大文件生成一个最终的编译包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")); }); 

Answer 3

使用gulp-sourcemaps gulp-concat和gulp-sourcemaps解决scheme。 这是来自我正在进行的一个项目。

 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')) }); 

这将结合并压缩所有scripts ，并将其放入一个名为all_the_things.js的文件中。 该文件将以特殊行结束

 //# sourceMappingURL=all_the_things.js.map 

这会告诉您的浏览器查找该地图文件，并将其写入。

Answer 4

2015年6月10日：从gulp-uglifyjs的作者注：

DEPRECATED：这个插件被列入黑名单，因为它依赖Uglify来连接文件，而不是使用gulp-concat，这打破了“它应该做一件事”的范例。 当我创build这个插件的时候，没有办法让源地图工作，但现在有一个gulp-sourcemaps插件可以实现相同的目标。 gulp-uglifyjs仍然工作得很好，并对Uglify执行给予了非常细微的控制，我只是给你一个提醒，其他选项现在存在。

---

2015年2月18日： gulp-sourcemaps gulp-concat都可以很好地与gulp-sourcemaps 。 只要确保为newLine gulp-concat正确设置newLine选项; 我build议\n; 。

---

原始答案（2014年12月）：改为使用gulp-uglifyjs 。 gulp-concat不一定安全; 它需要正确处理拖尾分号。 gulp-uglify也不支持源地图。 以下是我正在进行的一个项目的一个片段：

 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')) }); 

Answer 5

 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')); }); 

您的解决scheme不起作用，因为您需要在concat过程之后保存文件，然后再次uglify并保存。 你不需要重命名concat和uglify之间的文件。

Answer 6

我们正在使用下面的configuration来做类似的事情

  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", } }