目錄
一、什麼是gulp？爲什麼要用gulp？
gulp是一個自動化構建工具，主要用來設定程序自動處理靜態資源的工作。簡單的說，gulp就是用來打包項目的。因爲項目中往往會包含很多圖片、css\js\html 代碼，而這些如果不壓縮的話會給客戶端加載時帶來很大壓力，所以需要gulp來壓縮打包
二、gulp的安裝
附上本地安裝和全局安裝的區別：https://www.cnblogs.com/qiangxia/p/5264720.html
1.全局安裝
npm install gulp -g
2.本地安裝
npm init命令可以使在命令行目錄下生成一個package.json，裏邊包含了項目所用到的包，在別人使用項目的時候，就不用安裝所有的包了，只需使用npm install 指令就可以安裝package.json裏邊項目用到的包
使用方法：將目錄切換到項目的目錄中，輸入npm init ，然後可以一直回車直接用默認值，也可以自己輸入
最後在命令行目錄下生成一個package.json文件
新建一個文件夾，文件夾名稱即項目名稱爲gulpdemo，新建名稱爲css、js、html的文件
在gulpdemo目錄下生成了一個package.json文件，在sublime中打開項目，打開package.json是這樣的
--save-dev指令是將待安裝的包添加到package.json裏的依賴中，比如在安裝gulp時，在項目目錄中，執行此指令
npm install gulp --save-dev
三、創建第一個任務
再新建一個gulpfile.js，注意名稱必須是gulpfile.js，要不然gulp執行不了。裏邊的內容如下，作用是在控制檯輸出helloword：
var gulp = require("gulp");
gulp.task("greet",function(done){
console.log("helloword");
done();
});
相當於指令greet即執行function函數輸出helloword，在命令行中執行：
gulp greet
四、gulp的使用
1.壓縮css、js
共需要安裝以下幾種包，安裝方式都是gulp install xxx --save-dev
處理css用到的包：gulp-cssnano
處理css的流程，在gulpfile.js裏，定義這兩個功能
修改處理後文件名字用到的包：gulp-rename
處理js用到包：gulp-uglify
gulp.task("css",function(){
gulp.src("./css/*.css") //讀取css目錄下，所有css類型的文件
.pipe(cssnano()) //用管道將讀取的文件傳給cssnano()
.pipe(rename({"suffix":".min"})) //需要安裝gulp-rename，最後的文件就會是index.min.css
.pipe(gulp.dest("./dist/css")) //將處理後即壓縮後的的css放到指定位置
});
gulp.task("js",function(){
gulp.src("/js/*.js")
.pipe(uglify())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/js"))
});
2.合併文件
用npm下載gulp-concat
合併多個js文件夾下的.js文件，然後再進行壓縮uglify
gulp.task("js",function(){
gulp.src("/js/*.js")
.pipe(concat("index.js")) //合併多個文件到Index.js
.pipe(uglify({
'toplevel':true, //將全局的變量名稱壓縮
'compress':{
'drop_console':true //取消控制檯打印
}
}))
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/js"))
});
3.壓縮圖片
gulp.task("images",function(){
gulp.src("./images/*.*") //因爲圖片格式衆多，所以就所有格式都壓縮
.pipe(cache(imagemin())) //執行壓縮
.pipe(gulp.dest("./dist/images"))
});
4.檢測代碼修改，自動刷新瀏覽器
gulp.task("watch",function(){
gulp.watch("./css/*.css",['css']) //監聽所有css文件，當有代碼修改的時候，就執行css任務，自動的將修改的文件存儲到css任務最後存儲的文件
這個方法需要先執行watch任務，纔會監聽，也可以用npm下載browser-sync，使其實時刷新
gulp.task("bs",function(){
bs.init({
'server': {
'baseDir':'./' //指定服務器開始的根目錄
}
})
});
gulp.task("server",['bs','watch']);
//gulp.task("default",['bs','watch']);——只要在命令行中輸入gulp就自動的執行這個任務
然後再在需要監聽的任務後邊加上 .pipe(bs.stream())
五、gulpfile.js的全部代碼：
注意開頭的註冊是需要提前把包下載下來的。
var gulp = require("gulp");
var cssnano = require("gulp-cssnano"); //處理css文件
var rename = require("gulp-rename"); //將處理後的文件重命名
var uglify = require("gulp-uglify"); //處理js文件
var concat = require("gulp-concat"); //合併兩個文件,未下載下來Not found:gulp-concant
var cache = require("gulp-cache");
var imagemin = require("gulp-imagemin");//壓縮圖片
var bs = require("browser-sync").create() //創建一個用來刷新瀏覽器的服務器
gulp.task("greet",function(done){
console.log("helloword");
done();
});
gulp.task("css",function(){
gulp.src("./css/*.css") //讀取css目錄下，所有css類型的文件
.pipe(cssnano()) //用管道將讀取的文件傳給cssnano()
.pipe(rename({"suffix":".min"})) //需要安裝gulp-rename，最後的文件就會是index.min.css
.pipe(gulp.dest("./dist/css")) //des是存儲到指定位置的api，即將處理後即壓縮後的的css放到指定位置
.pipe(bs.stream()) //設置修改css代碼可以實時刷新瀏覽器
});
gulp.task("js",function(){
gulp.src("/js/*.js")
.pipe(concat("index.js")) //合併多個文件到Index.js
.pipe(uglify({
'toplevel':true, //將全局的變量名稱壓縮
'compress':{
'drop_console':true //取消控制檯打印
}
}))
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/js"))
});
gulp.task("images",function(){
gulp.src("./images/*.*") //因爲圖片格式衆多，所以就所有格式都壓縮
.pipe(cache(imagemin())) //執行壓縮
.pipe(gulp.dest("./dist/images"))
});
gulp.task("watch",function(){
gulp.watch("./css/*.css",['css']) //監聽所有css文件，當有代碼修改的時候，就執行css任務，
});
gulp.task("bs",function(){
bs.init({
'server': {
'baseDir':'./' //指定服務器開始的根目錄
}
})
});
gulp.task("server",['bs','watch']);
//gulp.task("default",['bs','watch']);——只要在命令行中輸入gulp就自動的執行這個任務
gulp的開發文檔和api：https://www.gulpjs.com.cn/docs/getting-started/creating-tasks/
參考教程：https://www.bilibili.com/video/BV1AE411477J?p=192