RPeraltaJr
3/27/2017 - 9:21 PM

Basic Gulp File

Basic Gulp File

/*----------------------------------------------------------------------------------------------
    GulpJS
    www.gulpjs.com
    www.gulpjs.com/plugins
    Gulp Documentation on GitHub: www.github.com/gulpjs/gulp/blob/master/docs/README.md
    1. Download all package modules => 'npm install' if [package.json] with dependencies exist
    2. Start gulp => 'gulp'
----------------------------------------------------------------------------------------------*/

// Gulp with additional plugins
var gulp = require('gulp'), // npm install gulp --save
    uglify = require('gulp-uglify'), // npm install gulp-uglify --save
    plumber = require('gulp-plumber'), // npm install gulp-plumber --save
    imagemin = require('gulp-imagemin'), // npm install gulp-imagemin --save
    cleanCSS = require('gulp-clean-css'), // npm install gulp-clean-css --save
    autoprefixer = require('gulp-autoprefixer'), // npm install gulp-autoprefixer --save
    rename = require('gulp-rename'), // npm install gulp-rename --save
    sass = require('gulp-sass'), // npm install gulp-sass --save
    sourcemaps = require('gulp-sourcemaps'), // npm install gulp-sourcemaps --save
    sassGlob = require('gulp-sass-glob'); // npm install gulp-sass-glob --save

// Error Log Function (Alternative to Plumber)
function errorLog(error) {
    console.error.bind(error);
    this.emit('end');
}

// Compress Images
gulp.task('image', function(){
    gulp.src('assets/img/**') // Anything in our img folder (Use two stars [**] to target any image within folder and its sub-folders)
        .pipe(imagemin()) // Run imagemin() function
        .pipe(gulp.dest('assets/build/img')); // Compressed image destination
});

// Convert SASS to CSS
gulp.task('sass', function (){
	return gulp.src('assets/scss/*.scss')
		.pipe(sassGlob())
    .pipe(sourcemaps.init())
		.pipe(sass({
			errLogToConsole: true,
			outputStyle: 'expanded'
		})).on('error', sass.logError)
    .pipe(autoprefixer())
    .pipe(sourcemaps.write())
		.pipe(gulp.dest('assets/build/css'));
});

// Compress CSS Styles
gulp.task('minify-css', function() {
    return gulp.src('assets/build/css/main.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('assets/build/css/'));
});

// Compresses Scripts
gulp.task('scripts', function() {
    // run for any js file inside js directory
    gulp.src('assets/js/*.js')
        .pipe(plumber()) // Plumber function to prevent watch from stopping if errors
        .pipe(uglify()) // Uglify function to compress js
        // .on('error', errorLog) Alternative to Plumber
        .pipe(gulp.dest('assets/build/js')); // Compressed js destination
});

// Watch Task (Sass, Image, Scripts, etc)
// Watch for any change. If yes, run the task
gulp.task('watch', function() {
    gulp.watch('assets/img/**', ['image']);
    gulp.watch('assets/scss/**/*', ['sass']);
    gulp.watch('assets/build/css/main.css', ['minify-css']);
    gulp.watch('assets/js/*.js', ['scripts']);
});

gulp.task('default', ['image', 'scripts', 'minify-css', 'sass', 'watch']); // Place all gulp tasks