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

Works correctly, but I would like to know what is the procedure for that in folders dist/css and dist/js, all folders and files are deleted and only the files are left index.min.css and index.min.js that the usemin() spawned.

Answer 1

Four steps:

STEP 1: Install the npm del package:

npm install --save del

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

STEP 2: include the command del:

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 be executed whenever your GULP script is started, within default):

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

Upshot: It’s gonna be 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'));
 });

I hope I’ve helped!