Using Gulp to Concatenate and Uglify files

后端 未结 6 2194
一生所求
一生所求 2020-11-27 09:39

I\'m trying to use Gulp to:

  1. Take 3 specific javascript files, concatenate them, then save the result to a file (concat.js)
  2. Take this concatenated file
6条回答
  •  死守一世寂寞
    2020-11-27 10:14

    we are using below configuration to do something 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']);
    

    sample GulpDS file is below:

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

提交回复
热议问题