gulp yargs | uglify | less | livereload | sourcemaps | rename |clean-css 综合应用

1、yargs 通过命令行传入参数
2、uglify 压缩js
3、less less 编译
4、livereload 自动刷新浏览器(前提是chrome要安装这个插件)
5、rename 重命名
6、clean-css 压缩css
7、nodemon 监听node 服务器文件发生改变
8、sourcemaps 调试用的

var path  = require("path");
var gulp  = require("gulp");
var yargs = require("yargs").argv;
var uglify = require('gulp-uglify');
var less = require("gulp-less");
var livereload = require('gulp-livereload');
var cssmin = require("gulp-clean-css");
var nodemon = require("gulp-nodemon");
var rename = require("gulp-rename");
var sourcemaps = require("gulp-sourcemaps");

-s 开始web服务
-w 监听文件发生变化
gulp.task("default",function(){
  if (yargs.s) {
    gulp.start("server");
  }

  if (yargs.w) {
    gulp.start("watch");
  }
});

配置nodemon node监听

var config = {
    script: './bin/www',
    options: {
      args: [],
      nodeArgs: [],
      env: {
        PORT: '3000'
      },
      cwd: __dirname,
      ignore: ['node_modules/**'],
      watch: ['./'],
      ext: 'js',
      delay: 1,
      legacyWatch: true
    }
};

gulp.task("server",['watch','release'],function(){
  nodemon(config);
});

gulp.task("release",['build:js','build:less']);

gulp.task("build:less",function(){
  gulp.src("public/less/*.less")
      .pipe(less())
      .pipe(gulp.dest("public/css/dist"))
      .pipe(sourcemaps.init())
      .pipe(cssmin({compatibility: 'ie8'}))
      .pipe(rename(function(path){
          path.basename += ".min";
      }))
      .pipe(sourcemaps.write("./",{includeContent: false, sourceRoot: './'}))
      .pipe(gulp.dest("public/css/dist"))
      .pipe(livereload());
});


gulp.task("build:js",function(){
    gulp.src("public/js/*.js")
      .pipe(sourcemaps.init())
      .pipe(uglify())
      .pipe(rename(function(path){
          path.basename+=".min";
      }))
      .pipe(sourcemaps.write("./",{includeContent: false, sourceRoot: '../'}))
      .pipe(gulp.dest("public/js/dist"))
      .pipe(livereload());
})

//监听文件内容发生改变
ulp.task("watch",function(){
   livereload.listen();  //开启livereload监听
    gulp.watch("public/less/*.less",["build:less"]);
    gulp.watch("public/js/*.js",["build:js"]);
    gulp.watch(["app/**"], 
      function(event) {  
        livereload.changed(event.path);  
    });  
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章