gulp系列：自动构建及刷新浏览器

2016年3月3日 14:50:15     晴

gulp = require('gulp')
#删除 1、清空目录 常用插件 gulp-clean 、del （nodejs模块）
del = require('del')
#2、文件复制 原生模块gulp，插件：gulp-cpoy
#3、JS压缩 插件:gulp-uglify
uglify = require('gulp-uglify')
#4、CSS压缩 插件：gulp-minify-css,gulp-uncss
minifycss = require('gulp-minify-css')
#去掉无用的css
uncss = require('gulp-uncss')
#5、html压缩
minifyhtml = require('gulp-minify-html')
#6、文件合并 插件：gulp-minify-css,gulp-uncss
concat = require('gulp-concat')
#7、浏览器刷新
browserSync = require('browser-sync').create()
#8 监视 插件：gulp-watch 原生模块：gulp
gulp.task('default', ['clean','server'], ->
)
#9、其他 yargs gulp-notify通知 gulp-util
# run-sequence异步同步执行任务[],[]中括号内为异步，两个括号件为同步
gulp.task('clean', (callback)->
#这种写法比较清晰
#  del(['./dest/*.html','./dest/js/.js','./dest/css/**/*.css'], callback)
#比较简洁的写法，类似正则
  del('./dest/**/.{html,js.css}', callback)
#注意点：不能使用/dest/css/**这种写法，经过多次测试，这才文件拷贝的时候会发生以下两种错误
#  Error: ENOENT: no such file or directory
#  Error: EEXIST: file already exists, mkdir
  return
)
gulp.task('miniCSS', ->
  gulp.src('src/css/*.css')
  .pipe(minifycss())
  .pipe(gulp.dest('dest/css/'))
  return
)
gulp.task('miniJS', ->
  gulp.src('src/js/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('dest/js/'))
)
gulp.task('miniHTML',->
  gulp.src('src/*.html')
  .pipe(minifyhtml())
  .pipe(gulp.dest('dest/'))
)

#// 使用默认任务启动Browsersync，监听JS文件
gulp.task('server', ['miniJS','miniCSS','miniHTML'],->
    browserSync.init({
      server:{
        'baseDir':'./dest/',
      }
      port:8000
    })
    gulp.watch("./src/js/*.js", ['miniJS']);
    gulp.watch("./src/css/*.css", ['miniCSS']);
    gulp.watch("./src/*.html", ['miniHTML'],browserSync.reload).on('change',browserSync.reload)
)

来自为知笔记(Wiz)