PROSAGA码农传奇-gulp-使用Gulp连接和Uglify文件

0# Hey ou | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    的<strong>
      2015年6月10日：
    </强>
     来自作者的注释
     <code>
      gulp-uglifyjs
    </code>
    ：
  </p>
  <BLOCKQUOTE>
    <P>
      的<strong>
        弃用：
      </强>
       这个插件已被列入黑名单，因为它依赖于Uglify来连接文件而不是使用gulp-concat，这打破了“它应该做一件事”的范例。当我创建这个插件时，没有办法让源映射与gulp一起工作，但是现在有一个gulp-sourcemaps插件可以实现相同的目标。 gulp-uglifyjs仍然运行良好，并且对Uglify执行提供了非常精细的控制，我只是告诉你现在存在的其他选项。
    </p>
  </BLOCKQUOTE>
  <HR />
  <P>
    的<strong>
      2015年2月18日：
    </强>
     <code>
      gulp-uglify
    </code>
     和
     <code>
      gulp-concat
    </code>
     两者都很好地配合
     <code>
      gulp-sourcemaps
    </code>
     现在。只要确保设置
     <code>
      newLine
    </code>
     选项正确
     <code>
      gulp-concat
    </code>
    ;我建议
     <code>
      \n;
    </code>
    。
  </p>
  <HR />
  <P>
    的<strong>
      原始答案（2014年12月）：
    </强>
     使用
    <a href="https://www.npmjs.com/package/gulp-uglifyjs" rel="nofollow">
      一饮而尽，uglifyjs
    </A>
     代替。
     <code>
      gulp-concat
    </code>
     不一定安全;它需要正确处理尾随分号。
     <code>
      gulp-uglify
    </code>
     也不支持源地图。这是我正在处理的项目的片段：
  </p>
   <pre>
    <code>
      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'))
});

</code>
  </pre>
</DIV>

1# 你咖喱人biss嗷 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    我们使用以下配置来做类似的事情
  </p>
   <pre>
    <code>
          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']);

</code>
  </pre>
  <P>
    示例GulpDS文件如下：
  </p>
   <pre>
    <code>
      {

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

</code>
  </pre>
</DIV>

2# 时间 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    事实证明我需要使用
     <code>
      gulp-rename
    </code>
     并在'uglification'之前首先输出连接文件。这是代码：
  </p>
   <pre>
    <code>
      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(){});

</code>
  </pre>
  <P>
    来自（哪里
     <code>
      grunt
    </code>
     起初有点令人困惑，但现在才有意义。我希望它有所帮助
     <code>
      gulp
    </code>
     菜鸟。
  </p>
  <P>
    而且，如果您需要源图，这里是更新的代码：
  </p>
   <pre>
    <code>
      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(){});

</code>
  </pre>
  <P>
    看到
    <a href="https://www.npmjs.com/package/gulp-sourcemaps">
      一饮而尽，sourcemaps
    </A>
     有关选项和配置的更多信息。
  </p>
</DIV>

3# 猫南北 | 2019-08-31 10-32

4# 一号位 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    解决方案使用
     <code>
      gulp-uglify
    </code>
    ，
     <code>
      gulp-concat
    </code>
     和
     <code>
      gulp-sourcemaps
    </code>
    。这来自我正在进行的项目。
  </p>
   <pre>
    <code>
      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'))
});

</code>
  </pre>
  <P>
    这结合并压缩了你的所有
     <code>
      scripts
    </code>
    ，将它们放入一个名为的文件中
     <code>
      all_the_things.js
    </code>
    。该文件将以特殊行结束
  </p>
   <pre>
    <code>
      //# sourceMappingURL=all_the_things.js.map

</code>
  </pre>
  <P>
    这告诉您的浏览器要查找该地图文件，它也会写出来。
  </p>
</DIV>

5# 威斯特 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    我的gulp文件生成一个最终的编译bundle-min.js，希望这对某人有帮助。
  </p>
  <P>
    <img src =“https://i.stack.imgur.com/eq0cE.png”alt =“在此处输入图片说明”/>
  </p>
   <pre>
    <code>
      //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"));
});

</code>
  </pre>
</DIV>