Gulp SASS Coffee Environment

/**
*
* First, step
* First: NPM install Browser-sync gulp-replace gulp-html-replace gulp-cache gulp-concat gulp-cond gulp-filter Gulp-rename Gul P-compass imagemin-pngquant mkdirp Gulp-shell gulp-jshint gulp-plumber gulp-watch gulp-ruby-sass gulp-uglify Gulp-coffee gulp-minify-css gulp-imagemin Gulp-clean--save-dev
* Download the required package files for Nodejs
*
* Second: Gulp init
* Initialize the directory structure and initialize the compass structure
*
* Last: Gulp (default)
* Run the default build module to monitor Sass Coffeescript file parsing,
* and dynamic refresh, for the current page
* Compression replacement script style Min.js Min.css
*
* if: Gulp Dev, development mode, does not compress the replacement script style.
*
*
* Precautions:
* 1. Need to install Ruby, sass, compass
* Gem install Sass
* Gem Install Compass
*
* Through package Gulp-shell, Shell command
*
* $ compass Create Src/compass
*
*
*
*/
var gulp = require (' Gulp '),//gulp
Coffee = require (' Gulp-coffee '),//coffee JS
Cache = require (' Gulp-cache '),//Caching
Clean = require (' Gulp-clean '),//Clear folder
Imagemin = require (' gulp-imagemin '),//compression img
minifycss= require (' gulp-minify-css '),//Compression CSS
Plumber = require (' Gulp-plumber '),//plumber, monitor error without exiting
Compass = require (' Gulp-compass '),//Edit Sass/compass
Rename = require (' Gulp-rename '),//Compression rename
Concat = require (' Gulp-concat '),//syntax connection
Uglify = require (' gulp-uglify '),//ZIP code
Cond = require (' Gulp-cond '),//Judging by variables
Pngquant = require (' imagemin-pngquant '),//png compression
Replace = require (' Gulp-replace '),//replacement module
Browsersync = require (' Browser-sync '). Create (),//server
Reload = Browsersync.reload,//server
Filter = require (' Gulp-filter '),//filtering
Htmlreplace = require (' Gulp-html-replace '),//html replacement
Shell = require (' Gulp-shell '),//command line
MKDIRP = require (' mkdirp ');//New Folder
Path = {
Scripts: ['./src/coffee/**/*.coffee '],
SCSS: ['./src/compass/sass/**/*.scss '],
CSS: ['./src/compass/stylesheets/**/*.css '],
JS: ['./src/js/**/*.js '],
IMG: ['./src/img/**/* '],
HTML: ['./src/**/*.html '],
Compass_css: './src/compass/stylesheets ',
Compass_scss: './src/compass/sass ',
Compass_file: './src/compass/config.rb '
},
Protasklist = [Undefined, ' default '];

var taskname = process.argv[2];
var Ispro = (Protasklist.indexof (taskname) >=0)? True:false;

Console.log (' taskname ' + taskname + ' =================== ' + ' Ispro ' + Ispro);

Compiling Coffeescript
Gulp.task (' Coffee ', function () {
Return gulp.src (path[' scripts ')
. Pipe (Plumber ())//plumber for pipe patching
. Pipe (Coffee ({bare:true}))
. Pipe (Gulp.dest ('./src/js '))
. Pipe (Browsersync.stream ());
});

Compiling SCSS
Gulp.task (' Compass ', function () {
Return gulp.src (path[' scss ')
. Pipe (Plumber ({
Errorhandler:function (Error) {
Console.log (Error.message);
This.emit (' End ');
}
}
))
. Pipe (Compass ({
Config_file:path.compass_file,
CSS:PATH.COMPASS_CSS,
Sass:path.compass_scss
}))
. On (' Error ', function (err) {
Would like-to-catch the error here
})
. Pipe (Gulp.dest (PATH.COMPASS_CSS))
. Pipe (Browsersync.stream ());
});

Clean
Gulp.task (' Clean ', function () {
return gulp.src ([' Dest/css ', ' dest/js ', ' dest/img '], {read:false})
. Pipe (clean ());
});

Image
Gulp.task (' images ', function () {
Return gulp.src (path[' img ')
. Pipe (Plumber ())//plumber for pipe patching
. Pipe (Cache (Imagemin ({progressive:true, optimizationlevel:7, use: [Pngquant ()]})))
. Pipe (Gulp.dest ('./dest/img '));
});

Style
Gulp.task (' CSS ', [' compass '], function () {
Return gulp.src (path["CSS"])
. PIPE (Plumber (
{
Errorhandler:function (Error) {
Console.log (Error.message);
This.emit (' End ');
}
}
))
. Pipe (Gulp.dest ('./dest/css '))
. Pipe (Concat ("Index.css"))
. Pipe (Cond (Ispro, rename ({suffix: '. Min '}))
. Pipe (Cond (Ispro, MINIFYCSS ()))
. Pipe (Gulp.dest ('./dest/css '))
. pipe (Filter ('/DEST/**/*.CSS '))//filter the stream to ensure only CSS files passed.

});

Script
Gulp.task (' JS ', [' coffee '], function () {
Return gulp.src (path[' JS ')
. Pipe (Concat (' index.js '))
. Pipe (Cond (Ispro, rename ({suffix: '. Min '}))
. Pipe (Cond (Ispro, Uglify ()))
. Pipe (Gulp.dest ('./dest/js '))
});

Html
Gulp.task (' HTML ', function () {
Return Gulp.src (path.html)
. Pipe (Cond (Ispro, replace (/#{min}/g, '. Min '), replace (/#{min}/g, ')))
. Pipe (Gulp.dest ('./dest '));
});

Gulp.task (' Watch-scss ', function () {
Return Gulp.watch (path[' scss '],[' compass ');
});

Gulp.task (' Watch-coffee ', function () {
Return Gulp.watch (path[' scripts '],[' coffee ');
});

Gulp.task (' Default ', [' watch-scss ', ' Watch-coffee ']);

Gulp.task (' All ', [' clean ', ' images ', ' css ', ' JS ');

Browser-sync task, only cares about compiled CSS
Gulp.task (' Browser-sync ', function () {
var files = [
'./dest/**/*.html ',
'./dest/css/**/*.css ',
'./dest/js/**/*.js ',
'./dest/img/**/* '
];
Browsersync.init (files,{
Server: {
BaseDir: "./dest"
}
});
});

Initialize Directory
Gulp.task (' mkdir ', function () {
Mkdirp (' src ');
Mkdirp (' dest ');
Mkdirp (' Src/coffee ');
Mkdirp (' Src/compass ');
Mkdirp (' src/css ');
Mkdirp (' src/img ');
Mkdirp (' Src/js ');
Mkdirp (' src/compass/sass/');
Mkdirp (' src/compass/stylesheets/');
});

Initializing the directory and building the compass structure
Gulp.task (' init ', ["mkdir"], Shell.task ([
' Compass Create Src/compass '
]));

Default task to is run with ' gulp '
Gulp.task (' Dev ', [' Clean ', ' html ', ' CSS ', ' js ', ' images ', ' browser-sync '), function () {
Gulp.watch (PATH.SCSS, [' CSS ']). On ("Change", function () {
Browsersync.reload ();
});
Gulp.watch (path.scripts, [' JS ']). On ("Change", function () {
Browsersync.reload ();
});
Gulp.watch (path.html, [' HTML ']). On ("Change", function () {
Browsersync.reload ();
});
});

Default task to is run with ' gulp '
Gulp.task (' Default ', [' Dev ']);

Gulp SASS Coffee Environment