gulpfile.js:
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");//壓縮圖片插件
var uglify = require("gulp-uglify");   //js壓縮插件
var sass = require("gulp-sass");      //sass轉換為css插件
var concat = require("gulp-concat"); //代碼合並插件
-----------------------------------------------------------------------
gulp能做什麽:（下面是羅列最基本的）
 
-----------------------------------------------------------------------
1...壓縮代碼
2...合並代碼
3...壓縮圖片
4...sass轉換
-----------------------------------------------------------------------
原理：
1...gulp是基於nodejs的數據流
2...gulp主要使用pipe事件輸入輸出
3...插件獨立使用
-----------------------------------------------------------------------
優勢：
 
1...gulp是基於代碼進行配置
2...gulp的可讀性更高
3...gulp基於數據流，所以可以操作pipe（）事件
-----------------------------------------------------------------------
安裝
cnpm install gulp -g
-----------------------------------------------------------------------
npm init
一直回車；
gulpfile.js 和packjson.js同級
-----------------------------------------------------------------------
常用的方法：
 

gulp.task     //定義任務
gulp.src     //找到需要執行任務的文件
gulp.dest   //執行任務的文件的去處
gulp.watch //觀察問是否發生變化

//定義默認任務
gulp.task("default",function(){
   return console.log("這是默認任務,只需要執行gulp")
})
//執行任務cmd 命令行gulp
-----------------------------------------------------------------------
gulp.task("message",function(){
   return console.log("這是制定任務")
})
//執行任務cmd 命令行gulp message
-----------------------------------------------------------------------
//拷貝文件
gulp.task("copyHtml",function(){
   gulp.src("src/*.html")             //src所有html
    .pipe(gulp.dest("dist"))     //輸送到dist文件夾下
})
//執行任務cmd 命令行gulp copyHtml 這樣就完成了文件拷貝
-----------------------------------------------------------------------
//圖片壓縮
cnpm i gulp-imagemin
gulp.task("imageMin",function(){
   gulp.src("src/images/*")                //src/images所有的東西
    .pipe(imagemin())                   //調用上面的方法
    .pipe(gulp.dest("dist/images"))  //輸送到dist/images文件夾下
})
//執行任務cmd 命令行gulp imageMin 這樣就完成了圖片壓縮
-----------------------------------------------------------------------
//壓縮js文件
cnpm i gulp-uglify
gulp.task("minify",function(){
   gulp.src("src/js/*.js")                 //src/js所有的js
    .pipe(uglify())               //調用上面的方法
    .pipe(gulp.dest("dist/js"))      //輸送到dist/js文件夾下
})
//執行任務cmd 命令行gulp minify 這樣就完成了js壓縮；
-----------------------------------------------------------------------
//sass轉換為css
cnpm i gulp-sass
gulp.task("sass",function(){
   gulp.src("src/sass/*.scss")                    //src/sass所有的scss文件
    .pipe(sass().on("erro",sass.logError))   //調用上面的方法,並且打印錯誤；
    .pipe(gulp.dest("dist/css"))            //輸送到dist/css文件夾下
})
//執行任務cmd 命令行gulp sass 這樣就完成了sass轉換為css；
-----------------------------------------------------------------------
//代碼合並
cnpm i gulp-concat
gulp.task("concatScripts",function(){
   gulp.src("src/js/*.js")                 //src/js所有的js
    .pipe(concat("main.js"))          //合並之後的文件名；
    .pipe(uglify())                  //壓縮js；如果這裏做了合並代碼的操作可以不用單獨壓縮js文件
    .pipe(gulp.dest("dist/js"))      //輸送到dist/js文件夾下
})
//執行任務cmd 命令行concatScripts
-----------------------------------------------------------------------
//監聽文件是否變化
gulp.task("watch",function(){
  gulp.watch("src/js/*.js",["concatScripts"]);
  gulp.watch("src/images/*",["imageMin"]);
  gulp.watch("src/sass/*.scss",["sass"]);
  gulp.watch("src/js/*.html",["copyHtml"]);
})
//執行任務cmd 命令行gulp watch
-----------------------------------------------------------------------
//執行多個任務
gulp.task("default",[任務一，任務二，任務三....])
//執行任務cmd 命令行gulp

gulp自動化構建工具使用