on 2014-08-07

gulp.js - Use Log

Intro

gulp.js

Getting Started

Grunt vs Gulp - Beyond the Numbers

package.json version setting

dependencies

How to pipe to another task in Gulp?

gulp.task('first', function() {
   // first task
});

gulp.task('second', ['first'], function() {
   // this occurs after 'first' finishes
});

Refer - How to pipe to another task in Gulp?

Use Package

Compass

First, must install compass

gulp-compass

var gulp = require('gulp');

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

gulp.task('default', function() {
  gulp.run('compass');

    gulp.watch([
        './sass/**',
        './img/**'
        ], function(event) {
        gulp.run('compass');
    });
});

gulp.task('compass', function() {
  gulp.src('./sass/*.scss')
    .pipe(compass({
        comments: false,
        css: 'css', // css folder
        sass: 'sass', // scss folder
        image: 'img' // image folder
    }));
});

commond

gulp
# or
gulp compass

Jshint

gulp-jshint

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

gulp.task('lint', function() {
    return gulp.src('./*.js') // js file
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
    // .pipe(jshint.reporter('default'))
});

commond

gulp lint

Minify Html

gulp-minify-html

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

gulp.task('minify-html', function() {
    var opts = {comments:true,spare:true};

    gulp.src('./*.html') // html file
    .pipe(minifyHTML(opts))
    .pipe(gulp.dest('./dist/')); // result minify html
});

commond

gulp minify-html

Minify CSS

gulp-minify-css

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

gulp.task('minify-css', function() {
    gulp.src('./css/*.css') // css files
    .pipe(minifyCSS({keepBreaks:true}))
    .pipe(gulp.dest('./dist/')); // result minify css
});

commond

gulp minify-css

Minify JavaScript

gulp-uglify

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

gulp.task('uglify', function() {
    gulp.src('./*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

commond

gulp compress