serve - install gulp mac

Usar Gulp para concatenar y Uglify archivos

Question

Estoy tratando de usar Gulp para:

1. Tome 3 archivos javascript específicos, conéctelos, luego guarde el resultado en un archivo (concat.js)
2. Tome este archivo concatenado y uglify / minify it, luego guarde el resultado en otro archivo (uglify.js)

Tengo el siguiente código hasta el momento

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

Sin embargo, la operación de uglify no parece funcionar, o el archivo no se genera por alguna razón.

¿Qué debo hacer para que esto suceda?

Answer 1

Mi archivo gulp produce un final compiled-bundle-min.js, espero que esto ayude a alguien.

//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 2

Resultó que necesitaba usar gulp-rename y también sacar el archivo concatenado primero antes de ''uglification''. Aquí está el código:

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

Viniendo de grunt , fue un poco confuso al principio, pero tiene sentido ahora. Espero que ayude a los noobs gulp .

Y, si necesita mapas de origen, aquí está el código actualizado:

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

Vea gulp-sourcemaps para más información sobre opciones y configuración.

Answer 3

Solución usando gulp-uglify , gulp-concat y gulp-sourcemaps . Esto es de un proyecto en el que estoy trabajando.

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

Esto combina y comprime todos tus scripts , los pone en un archivo llamado all_the_things.js . El archivo terminará con una línea especial

//# sourceMappingURL=all_the_things.js.map

Lo que le dice a su navegador que busque ese archivo de mapa, que también escribe.

Answer 4

estamos usando la configuración de abajo para hacer algo similar

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

muestra del archivo GulpDS a continuación:

{

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

Answer 5

10 de junio de 2015: Nota del autor de gulp-uglifyjs :

DEPRECATED: Este plugin ha sido incluido en la lista negra ya que depende de Uglify para concaturar los archivos en lugar de usar gulp-concat, lo que rompe el paradigma "Debería hacer una cosa". Cuando creé este complemento, no había forma de que los mapas de origen funcionaran con gulp, sin embargo, ahora hay un complemento gulp-sourcemaps que logra el mismo objetivo. gulp-uglifyjs todavía funciona muy bien y da un control muy granular sobre la ejecución de Uglify, solo te estoy dando una pista de que ya existen otras opciones.

18 de febrero de 2015: gulp-uglify y gulp-concat funcionan bien con gulp-sourcemaps ahora. Solo asegúrese de establecer la opción newLine correctamente para gulp-concat ; Lo recomiendo /n; .

Respuesta original (diciembre de 2014): use gulp-uglifyjs en gulp-uglifyjs lugar. gulp-concat no es necesariamente seguro; necesita manejar los signos de punto y coma de manera correcta. gulp-uglify tampoco admite mapas fuente. Aquí hay un fragmento de un proyecto en el que estoy trabajando:

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 6

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

Su solución no funciona porque necesita guardar el archivo después del proceso de concat y a continuación, uglify y guardar de nuevo. No necesita cambiar el nombre del archivo entre concat y uglify.