gulp sass coffee 環境

標籤：

/**
*
* 一、步驟
* 首先：npm install browser-sync gulp-replace gulp-html-replace gulp-cache gulp-concat gulp-cond gulp-filter gulp-rename gulp-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
* 下載nodejs所需包檔案
*
* 其次: gulp init
* 初始化目錄結構，並初始化compass結構
*
* 最後：gulp (default)
* 運行預設構建模組，時時監控sass coffeescript檔案解析，
* 並動態重新整理，作用於當前頁面
* 壓縮替換指令碼樣式 min.js min.css
*
* 如果：gulp dev，開發模式，不壓縮替換指令碼樣式。
*
*
* 注意事項：
* 1. 需要安裝ruby , sass, compass
* gem install sass
* gem install compass
*
* 通過包 gulp-shell ，shell命令
*
* $ compass create src/compass
*
*
*
*/
var gulp = require(‘gulp‘), //gulp
coffee = require(‘gulp-coffee‘),//coffee js
cache = require(‘gulp-cache‘),//緩衝
clean = require(‘gulp-clean‘),//清除檔案夾
imagemin = require(‘gulp-imagemin‘),//壓縮img
minifycss= require(‘gulp-minify-css‘),//壓縮css
plumber = require(‘gulp-plumber‘),//水管工，監控報錯，而不退出
compass = require(‘gulp-compass‘),//編輯sass/compass
rename = require(‘gulp-rename‘), //壓縮重新命名
concat = require(‘gulp-concat‘), //文法串連
uglify = require(‘gulp-uglify‘), //壓縮代碼
cond = require(‘gulp-cond‘), //根據變數判斷
pngquant = require(‘imagemin-pngquant‘),//png壓縮
replace = require(‘gulp-replace‘),//替換模組
browserSync = require(‘browser-sync‘).create(),//server
reload = browserSync.reload,//server
filter = require(‘gulp-filter‘),//過濾
htmlreplace = require(‘gulp-html-replace‘),//html替換
shell = require(‘gulp-shell‘),//命令列
mkdirp = require(‘mkdirp‘);//建立檔案夾
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);

// 編譯coffeeScript
gulp.task(‘coffee‘, function() {
return gulp.src(path[‘scripts‘])
.pipe(plumber()) //plumber給pipe打補丁
.pipe(coffee({bare : true}))
.pipe(gulp.dest(‘./src/js‘))
.pipe(browserSync.stream());
});

// 編譯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());
});

// 清理
gulp.task(‘clean‘, function() {
return gulp.src([‘dest/css‘, ‘dest/js‘, ‘dest/img‘], {read: false})
.pipe(clean());
});

// 圖片
gulp.task(‘images‘, function() {
return gulp.src(path[‘img‘])
.pipe(plumber()) //plumber給pipe打補丁
.pipe(cache(imagemin({progressive: true, optimizationLevel : 7, use: [pngquant()]})))
.pipe(gulp.dest(‘./dest/img‘));
});

// 樣式
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.

});

// 指令碼
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"
}
});
});

//初始化目錄
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/‘);
});

//初始化目錄並產生compass結構
gulp.task(‘init‘, ["mkdir"], shell.task([
‘compass create src/compass‘
]));

// Default task to be 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 be run with `gulp`
gulp.task(‘default‘, [‘dev‘]);

gulp sass coffee 環境