Prevent gulp to minify code on local machine

Question

I started a project with [RDash angular dashboard][1] which using gulp. this is the first time I work with gulp and the problem is that while I'm working locally I can't debug because it minify css/js/html files.

How can I prevent from gulp to minify while working locally?

Here is what I have on gulpfile.js:

var gulp = require('gulp'),
usemin = require('gulp-usemin'),
wrap = require('gulp-wrap'),
connect = require('gulp-connect'),
watch = require('gulp-watch'),
minifyCss = require('gulp-minify-css'),
minifyJs = require('gulp-uglify'),
concat = require('gulp-concat'),
less = require('gulp-less'),
rename = require('gulp-rename'),
minifyHTML = require('gulp-minify-html');

var paths = {
scripts: 'src/js/**/*.*',
styles: 'src/less/**/*.*',
images: 'src/img/**/*.*',
templates: 'src/templates/**/*.html',
index: 'src/index.html',
bower_fonts: 'src/components/**/*.{ttf,woff,eof,svg}',
};

/**
 * Handle bower components from index
   */
   gulp.task('usemin', function() {
return gulp.src(paths.index)
    .pipe(usemin({
        js: [minifyJs(), 'concat'],
        css: [minifyCss({keepSpecialComments: 0}), 'concat'],
    }))
    .pipe(gulp.dest('dist/'));
});

/**
 * Copy assets
   */
gulp.task('build-assets', ['copy-bower_fonts']);

gulp.task('copy-bower_fonts', function() {
return gulp.src(paths.bower_fonts)
    .pipe(rename({
        dirname: '/fonts'
    }))
    .pipe(gulp.dest('dist/lib'));
});

/**
 * Handle custom files
 */
gulp.task('build-custom', ['custom-images', 'custom-js', 'custom-less',         'custom-templates']);

gulp.task('custom-images', function() {
return gulp.src(paths.images)
    .pipe(gulp.dest('dist/img'));
});

gulp.task('custom-js', function() {
return gulp.src(paths.scripts)
    .pipe(minifyJs())
    .pipe(concat('dashboard.min.js'))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('custom-less', function() {
return gulp.src(paths.styles)
    .pipe(less())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('custom-templates', function() {
return gulp.src(paths.templates)
    .pipe(minifyHTML())
    .pipe(gulp.dest('dist/templates'));
});

/**
 * Watch custom files
 */
gulp.task('watch', function() {
gulp.watch([paths.images], ['custom-images']);
gulp.watch([paths.styles], ['custom-less']);
gulp.watch([paths.scripts], ['custom-js']);
gulp.watch([paths.templates], ['custom-templates']);
gulp.watch([paths.index], ['usemin']);
});

/**
 * Live reload server
 */
gulp.task('webserver', function() {
connect.server({
    root: 'dist',
    livereload: true,
    port: 8888
});
});

gulp.task('livereload', function() {
gulp.src(['dist/**/*.*'])
    .pipe(watch())
    .pipe(connect.reload());
});

/**
 * Gulp tasks
 */
gulp.task('build', ['usemin', 'build-assets', 'build-custom']);
gulp.task('default', ['build', 'webserver', 'livereload', 'watch']);

Macias

FYI gulp-minify-css has been deprecated in favor of gulp-clean-css – Emeric

Answer 1

You should add gulp-minify and use it as follows:

var minify = require('gulp-minify');

gulp.task('compress', function() {
  gulp.src('lib/*.js')
    .pipe(minify({
        exclude: ['tasks'],
        ignoreFiles: ['.combo.js', '-min.js']
    }))
    .pipe(gulp.dest('dist'))
});

Pass the files that you dont want to minify to the exclude.

In your code, you have specified that you want to minify all of the files here:

  gulp.task('usemin', function() {
   return gulp.src(paths.index)
    .pipe(usemin({
        js: [minifyJs(), 'concat'],
        css: [minifyCss({keepSpecialComments: 0}), 'concat'],
    }))
    .pipe(gulp.dest('dist/'));
});

In line

.pipe(usemin({..}) 

Just dont use this usemin task, and you should be fine

Cholecystectomy

I added your code right after 'var paths = ....' change exclude to be: ['src/js/**/*.*'] and I get can't find module 'gulp-minify'. My code already minify files - isn't it better to edit the code I have? also, if I add new task called 'compress' shouldn't I add it to default task or build ? – Macias

There, adjusted an answer for you :) – Cholecystectomy

Thanks a lot! I stopped using it, but now it looks like index.html is not updated with relveant JS files. I think that adding all of them to index.html will solve the problem. Thanks! – Macias

Glad I could help. If you are satisfied, you can mark it with answer tag :) – Cholecystectomy