Search code examples
javascriptgulpminify

Gulp minify all css/js and move to folder with same structure?


I've this chrome extension that I'm working on, is there anyway i can minify all css and js and move to the build folder without losing the structure?

gulp.task('clean', function() {
    return gulp.src('build/*', {read: false})
        .pipe(clean());
});

gulp.task('copy', function() {
    gulp.src('assets/fonts/**')
        .pipe(gulp.dest('build/fonts'));
    gulp.src('assets/images/**')
        .pipe(gulp.dest('build/images'));
    gulp.src('_locales/**')
        .pipe(gulp.dest('build/_locales'));
    return gulp.src('src/manifest.json')
        .pipe(gulp.dest('build'));
});

gulp.task('html', function() {
    return gulp.src('popup/*.html')
        .pipe(cleanhtml())
        .pipe(gulp.dest('build'));
});

gulp.task('scripts', ['jshint'], function() {
    gulp.src('/**/*.js')
        .pipe(gulp.dest('/**/*.js'));
    return gulp.src(['/**/*.js', '!/**/*.js'])
        .pipe(stripdebug())
        .pipe(uglify({outSourceMap: true}))
        .pipe(gulp.dest('build/**/*'));
});

currently this works for the css and other assets, but I cant figure out how to do it withe js as I have everything split up neatly in folders and components


Solution

  • I can't check it rigt now, but I think you shoud do this:

    1. Get rid of first two lines in your scripts task they do nothing as I see.

    2. Fix Task method from gulp. It accepts only 2 parameters: taskName and taskFunction.

    3. Fix src. As I understand you are saying get all .js files, except all .js files so nothing will be piped.

    4. gulp.dest path shoul look like build/ or build/js/.

    Can you try this?

    gulp.task('scripts', function() {
        return gulp.src(['/**/*.js'])
            .pipe(stripdebug())
            .pipe(uglify({outSourceMap: true}))
            .pipe(gulp.dest('build/js/'));
    });