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);  
    });  
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章