javascript – Gulp task using (usemin)

Question:

I recently started using Gulp, in an existing project. I created the following gulpfile.js :

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    htmlReplace = require('gulp-html-replace'),
    uglify = require('gulp-uglify'),
    usemin = require('gulp-usemin'),
    cssmin = require('gulp-cssmin');

gulp.task('default', ['copy'], function(){
    gulp.start('build-img', 'usemin');
});

gulp.task('copy', ['clean'], function(){
    return gulp.src('src/**/*')
        .pipe(gulp.dest('dist'));
});

gulp.task('clean', function(){
    return gulp.src('dist')
        .pipe(clean());    
});

gulp.task('build-img', function(){
    gulp.src('dist/img/*/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));    
});

gulp.task('usemin', function(){
    gulp.src('dist/**/*.html')
        .pipe(usemin({
            'js' : [uglify],
            'css': [cssmin]
        }))
        .pipe(gulp.dest('dist'));
 });

It works correctly, but I would like to know what is the procedure so that in the dist/css and dist/js folders, all folders and files are deleted and only the index.min.css and index.min.js files that index.min.css index.min.js usemin() generated.

Answer:

Four steps:

STEP 1: Install the npm del package :

npm install --save del

Next steps change your Gulp file (example: gulpfile.js)

STEP 2: include the del command:

del    = require('del');

STEP 3: Create a task to delete:

gulp.task('tarefa_que_deleta', function () {
      return del([
           'dist//css/**',
           'dist//js/**'
        ]);
});

STEP 4: call the task (example below putting it to run whenever your GULP script is started, inside default ):

gulp.task('default', ['copy', 'tarefa_que_deleta'], function(){
    gulp.start('build-img', 'usemin');
});

Result: It will look something like this:

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    htmlReplace = require('gulp-html-replace'),
    uglify = require('gulp-uglify'),
    usemin = require('gulp-usemin'),
    cssmin = require('gulp-cssmin'),
    del    = require('del');

gulp.task('default', ['copy', 'tarefa_que_deleta'], function(){
    gulp.start('build-img', 'usemin');
});

gulp.task('copy', ['clean'], function(){
    return gulp.src('src/**/*')
        .pipe(gulp.dest('dist'));
});

gulp.task('clean', function(){
    return gulp.src('dist')
        .pipe(clean());    
});

gulp.task('tarefa_que_deleta', function () {
      return del([
           'dist//css/**',
           'dist//js/**'
        ]);
});

gulp.task('build-img', function(){
    gulp.src('dist/img/*/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));    
});

gulp.task('usemin', function(){
    gulp.src('dist/**/*.html')
        .pipe(usemin({
            'js' : [uglify],
            'css': [cssmin]
        }))
        .pipe(gulp.dest('dist'));
 });

Hope this helps!