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 环境

标签：

原文地址：http://www.cnblogs.com/zhangwangcai/p/4619439.html