gulp是基於node的自動化構建工具
gulp能幹啥？1.壓縮JS、css文件2.合併文件3.自動編譯SASS4.自動壓縮圖片5.保存時自動刷新瀏覽器
npm init ---->初始化一個gulp環境，創建一個package.json文件
--save:將信息保存在package.json中
--dev:將信息保存在package.json的devDependencies節點中
用gulp當然要給它位置啦！gulpfile.js是gulp項目的配置文件，是位於根目錄的普通JS文件
一般是gulpfile pakage node_modules三個文件放在一起。
添加部署文件：
1、輸入源
輸入源(操作的文件路徑) gulp.src(文件路徑)
src方法是指定需要處理的源文件的路徑，gulp借鑑了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，gulp.src返回當前文件流至可用插件
文件路徑設置：
a、單個文件夾:"src/js/index.js";
b、匹配所有文件:"*" 例：src/*.js --->src下面所有的js文件
c、匹配0個或多個子文件夾："**" 例如：scr/**/*.js--->src下面的0個或者多個子文件夾的js文件
d、匹配多個屬性：{} 例如：src/{a,b}.js--->src下面的a.js和b.js src/*.{jpg,png,gif}--->src下面所有的jpg png gif文件
e、排除文件：！ 例如: !scr.a.js--->排除src下面的a.js文件
2、通過管道進行輸入
管道：pipe()
3、輸出源：參數是將文件輸出到哪
dest()
栗子：
拷貝：gulp.src("src/**/*").pipe(gulp.dest("dist/js"))
合併：gulp.task("addDate",function(){
gulp.src(["src/json/**/*","src/xml/**/*"])
.pipe(gulp.dest("dist/data"))
})
gulp高級：--->當然需要加載插件！！！！！
1.圖片壓縮---安裝插件cnpm install gulp-imagemin --save-dev
var imgmin = require("gulp-imagemin");--->引入圖片壓縮的模塊
gulp.task("imgmin",function(){
//將所有的圖片進行壓縮
gulp.src("src/imgs/**/*")
//通過管道先壓縮，然後再通過管道輸出到dist文件夾下
.pipe(imgmin())
.pipe(gulp.dest("dist/imgs"))
})
2.Js壓縮---命令行安裝 cnpm install gulp-uglify --save-dev
var jsMin = require("gulp-uglify");--->引入Js壓縮的模塊
gulp.task("Jsmin",function(){
//將所有的JS進行壓縮
gulp.src("src/js/js*.js")
//通過管道先壓縮，然後再通過管道輸出到dist文件夾下
.pipe(jsMin())
.pipe(gulp.dest("dist/js/js"))
})
3.編譯sass及壓縮css ---->cnpm install gulp-sass-china --save-dev
var css = require("gulp-sass-china")//引入sass編譯的模塊
//開啓任務
gulp.task("cssmin",function(){
//將scss下面的所有scss sass文件 進行編譯
gulp.src("scss/**/*.{scss,sass}")
//通過管道進行編譯，然後再通過管道輸出待src/css文件夾下，
//如果要進行壓縮的話就在css裏面傳遞參數 compressed爲緊湊格式
.pipe(css({
outputStyle:"compressed"
}))
.pipe(gulp.dest("src/css"))
})
4.監聽
雖然以上可以將sass編譯和壓縮 但是如果在sass裏面編寫文件 css裏面的文件不會改變的！而需要每次都去終端中運行。特別麻煩。首先監聽不能夠單獨存在 必須配合任務一起使用！
/*
監聽：gulp.watch()
參數兩個：1.監聽哪些文件發生變化2.當文件發生變化的時候去執行哪個任務---》（爲一個集合）
*/
gulp.task("scss",function(){
gulp.task("scss/**/*.{scss,sass}",["cssmin"])
})
5.服務器--->cnpm install gulp-connect --save-dev
參數：
root:設置目錄
port:端口號
livereload:當設置爲true的時候，gulp會自動檢測文件的變化然後自動進行源碼構建
/*搭建本地服務器*/
var connect = require("gulp-connect");
gulp.task("server",function(){
connect.sercer({
root:"src",//路徑
port:123,//端口號
livereload:true，//檢測文件變化
})
})
6.自動刷新
/*搭建本地服務器*/
var connect = require("gulp-connect");
gulp.task("server",function(){
connect.server({
root:"src",
port:123,
livereload:true,
})
})
/*實現自動刷新*/
//server+watch 注意服務跟監聽只能存在一個
//因此我們需要把刷新和服務器開啓爲2部分
gulp.task("server-watch",funcion（）{
gulp.watch("src/index.html",function(){
gulp.src("src/index.html").pipe(connect.reload())
})
gulp.task("server-task",["server","server-watch"])
7.轉義ES6 gulp-babel--->cnpm install --save-dev gulp-babel @babel/core @babel/preset-env
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('babel', () =>
gulp.src('src/es6.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist'))
);
})
本文主要是借鑑華哥的，之所以碼出來是便於系統的體驗一把，還更好記！！