gulp
基于nodejs的自動(dòng)任務(wù)運(yùn)行器，前段工程化的構(gòu)建工具
測(cè)試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。
運(yùn)行
gulp 任務(wù)名稱
1.全局安裝gulp
cnpm install gulp -g
測(cè)試
gulp -v
2、初始化----生成package.json文件，這一步可以省略
cnpm init
3、安裝本地的gulp
cnpm install gulp --save? ---項(xiàng)目依賴
cnpm install gulp --save-dev? ----開發(fā)依賴
4、構(gòu)建項(xiàng)目的基本開發(fā)目錄
gulp-course
css
html
image
js
json
xml
index.html
5、創(chuàng)建一個(gè)文件gulpfile.js
----命令操作的文件，可以執(zhí)行測(cè)試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。
6、假設(shè)我們的項(xiàng)目上線的目錄為dist
dist文件夾中的東西就是要上傳到服務(wù)器里面的東西
7、復(fù)制操作
頁面、圖片、css文件等任何文件
頁面
gulp.task("copy-index",function(){
//文件的路徑
gulp.src("./index.html")
.pipe(gulp.dest("dist"));//表示如果沒有dist文件夾，則創(chuàng)建一個(gè)文件夾，并且將index.html放進(jìn)去
})
圖片----推薦一勞永逸---第三種方法
gulp.task("copy-image",function(){
// gulp.src("./image/*.jpg")//只負(fù)責(zé)復(fù)制jpg圖片
// gulp.src("./image/*.{jpg,png}")//負(fù)責(zé)復(fù)制jpg和png格式的圖片
gulp.src("./image/**/*")//負(fù)責(zé)復(fù)制image文件夾下的所有的文件
.pipe(gulp.dest("dist/image"));
})
//同時(shí)負(fù)責(zé)json文件夾下的和xml文件夾下的到dist的data目錄中去,加入在json文件家中c.json不希望復(fù)制過，我們使用！來搞定
gulp.task("copy-data",function(){
gulp.src(["xml/*.xml","json/*.json","!json/c.json"])
.pipe(gulp.dest("dist/data"));
})
8、如果希望一次性執(zhí)行多個(gè)任務(wù)，使用的自帶的任務(wù)--build
gulp.task("build",["copy-index","copy-image","copy-data"],function(){
console.log("執(zhí)行完畢")
})
9、實(shí)時(shí)監(jiān)測(cè)文件的更新? ---? 任務(wù)watch
gulp.task("watch",function(){
gulp.watch("./index.html",["copy-index"]);
gulp.watch("./image/**/*",["copy-image"]);
gulp.watch(["xml/*.xml","json/*.json","!json/c.json"],["copy-data"]);
})
10、自動(dòng)任務(wù)----執(zhí)行時(shí)只需要輸入gulp 即可? 不需要輸入 gulp defalt
gulp.task("default",["build","watch"])
11、gulp插件
less? ----- 添加到build和watch任務(wù)中
cnpm i gulp-less --save
gulp.task("less",function(){
gulp.src("./css/test.less")
.pipe(less())//編譯less文件---less()
.pipe(gulp.dest("dist/css"));
})
sass? ----- 添加到build和watch任務(wù)中
cnpm i gulp-sass --save
gulp.task("sass",function(){
gulp.src("./css/main.scss")
.pipe(sass())//編譯less文件---less()
.pipe(gulp.dest("dist/css"));
})
服務(wù)器配置
cnpm i gulp-connect --save
--- server? 不能更改任務(wù)名
gulp.task("server",function(){
connect.server({
root:"dist", //啟動(dòng)項(xiàng)目目錄
livereload:true? //熱加載---實(shí)時(shí)更新數(shù)據(jù)---- 在更改完數(shù)據(jù)需要的地方設(shè)置一個(gè)connect.reload(),給每一個(gè)任務(wù)都加
})
})
合并文件
cnpm i gulp-concat --save
//合并js文件
gulp.task("script",function(){
gulp.src("./js/*.js")
.pipe(concat("ab.js"))? //css文件也可以合并，less文件也可以合并，scss文件也可以合并
.pipe(gulp.dest("dist/js"))
})
壓縮js文件
cnpm i gulp-uglify? --save
gulp.task("script",function(){
gulp.src("./js/*.js")
.pipe(concat("ab.js"))
.pipe(uglify()) // 壓縮js代碼
.pipe(gulp.dest("dist/js"))
})
壓縮css文件
cnpm i gulp-minify-css --save
//less編譯
gulp.task("less",function(){
gulp.src("./css/test.less")
.pipe(less())//編譯less文件---less()
.pipe(minifyCss()) //壓縮之后再放進(jìn)文件夾
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload())
})
//sass編譯
gulp.task("sass",function(){
gulp.src("./css/main.scss")
.pipe(sass())//編譯less文件---less()
.pipe(minifyCss()) //壓縮之后再放進(jìn)文件夾
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload())
})
重起名字
cnpm i gulp-rename --save
//合并js文件
gulp.task("script",function(){
gulp.src("./js/*.js")
.pipe(concat("ab.js"))? //重起名字
.pipe(gulp.dest("dist/js"))
.pipe(rename("ab.min.js"))//重起名字
.pipe(uglify()) // 壓縮js代碼
.pipe(gulp.dest("dist/js"))
})
//less編譯
gulp.task("less",function(){
gulp.src("./css/test.less")
.pipe(less())//編譯less文件---less()
.pipe(rename("test.css"))//重起名字
.pipe(gulp.dest("dist/css"))
.pipe(rename("test.min.css"))//重起名字
.pipe(minifyCss())
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload())
})
//sass編譯
gulp.task("sass",function(){
gulp.src("./css/main.scss")
.pipe(sass())//編譯less文件---less()
.pipe(rename("main.css"))//重起名字
.pipe(gulp.dest("dist/css"))
.pipe(rename("main.min.css"))//重起名字
.pipe(minifyCss())
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload())
})
壓縮圖片
cnpm install gulp-imagemin --save
gulp.task("copy-image",function(){
// gulp.src("./image/*.jpg")//只負(fù)責(zé)復(fù)制jpg圖片
// gulp.src("./image/*.{jpg,png}")//負(fù)責(zé)復(fù)制jpg和png格式的圖片
gulp.src("./image/**/*")//負(fù)責(zé)復(fù)制image文件夾下的所有的文件
.pipe(imagemin())//壓縮圖片
.pipe(gulp.dest("dist/image"))
.pipe(connect.reload())
})
拓展
http://npmjs.org/
搜索gulp
