/** * * 一、步骤 * 首先：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'), //gulpcoffee = require('gulp-coffee'),//coffee jscache = require('gulp-cache'),//缓存clean = require('gulp-clean'),//清除文件夹imagemin = require('gulp-imagemin'),//压缩imgminifycss= require('gulp-minify-css'),//压缩cssplumber = require('gulp-plumber'),//水管工，监控报错，而不退出compass = require('gulp-compass'),//编辑sass/compassrename = 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(),//serverreload = browserSync.reload,//serverfilter = 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);
// 编译coffeeScriptgulp.task('coffee', function() { return gulp.src(path['scripts']) .pipe(plumber()) //plumber给pipe打补丁 .pipe(coffee({bare : true})) .pipe(gulp.dest('./src/js')) .pipe(browserSync.stream());});
// 编译scssgulp.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'))});
// htmlgulp.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 CSSgulp.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']);
转载于:https://www.cnblogs.com/zhangwangcai/p/4619439.html
