3/27/2017 - 9:21 PM

Basic Gulp File

Basic Gulp File

    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) {

// 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')
			errLogToConsole: true,
			outputStyle: 'expanded'
		})).on('error', sass.logError)

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

// Compresses Scripts
gulp.task('scripts', function() {
    // run for any js file inside js directory
        .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