web 環境搭建00前端自動化構建工具(gulp)

web 環境搭建----前端自動化構建工具(gulp):

1----先下載安裝node.js

2----而後在node.js命令行安裝:npm install gulp -g (全局下載安裝gulp插件)

3----而後進入到項目文件夾(命令cd 文件夾名),在項目文件夾中安裝依賴文件:npm install gulp --save-dev

(根據依賴文件下載gulp插件)

4----在項目文件夾目錄下初始化:npm init (初始化文件) {初始化文件後項目中會出現packgae.json文件,文件

中有項目名稱,版本,描述依賴關係文件等}

5----項目中新建js文件:gulpfile.js(本身寫文件名只能是gulpfile.js)

6----在項目文件夾目錄中下載相關插件:

命令行:

npm instal gulp-connect --save-dev- (下載服務器插件列表)

npm instal gulp-uglify --save-dev- (下載壓縮js插件)

npm instal gulp-minify-css --save-dev- (下載壓縮css插件)

npm instal gulp-imagemin --save-dev- (下載壓縮圖片插件)

npm instal gulp-minify-html --save-dev- (下載壓縮html插件)

npm instal gulp-less --save-dev- (下載壓縮less插件)

7----在gulpfile.js文件中寫入js代碼:

文件內容:

var gulp=require("gulp") //根插件

var connect=require("gulp-connect") //服務器插件

var uglify=require("gulp-uglify") //壓縮js文件

var minifycss=require("gulp-minify-css") //壓縮css文件

var minimg=require("gulp-imagemin") //壓縮圖片文件

var minhtml=require("gulp-minify-html") //壓縮html文件

var less=require("gulp-less") //壓縮less文件

 

//建立任務

/*一、建立任務 task

* 二、找到目標文件 src

* 三、在pipe中執行對文件操做的方法

* 四、操做完成以後把操做完成以後的文件放在哪裏

*/

gulp.task("copy-html",function(){

return gulp.src("src/*.html")

.pipe(minhtml())

.pipe(gulp.dest("dits"))

.pipe(connect.reload())

})

//參數一是名稱,參數2是回調函數,pipe是管道,獲取到html放到測試,環境文件夾中.pipe()管道能夠加不少個

gulp.task("copy-css",function(){

return gulp.src("src/css/*.css")

.pipe(minifycss())

.pipe(gulp.dest("dits/css"))

})

//編譯less

gulp.task("less",function(){

return gulp.src("src/css/*.less")

.pipe(less())

.pipe(minifycss())

.pipe(gulp.dest("dits/css"))

})

gulp.task("copy-js",function(){

return gulp.src("src/js/*.js")

.pipe(uglify())

.pipe(gulp.dest("dits/js"))

})

gulp.task("copy-img",function(){

return gulp.src("src/img/*.{jpg,png}")

.pipe(minimg({ //能夠傳參(參數是對象),對於優化的品質控制

optimizationLevel:7 // 優化品質(默認爲3 1~7)

}))

.pipe(gulp.dest("dits/img"))

})

 

//server

gulp.task("server",function(){

connect.server({

root:"dits", //(根目錄服務器範圍設定)

port:8888, //(端口號設置)

livereload:true //(熱替換,不用刷新就能夠實時刷新修改的內容)

})

})

 

 

//監聽

//watch是監放任務名稱,(ctrl + c 是終止監放任務)

gulp.task("watch",function(){

gulp.watch("src/*.html",["copy-html"])

gulp.watch("src/css/*.css",["copy-css"])

gulp.watch("src/js/*.js",["copy-js"])

gulp.watch("src/img/*.jpg",["copy-img"])

gulp.watch("src/css/*.less",["less"])

})

//多任務同時執行:

gulp.task("default",["server","watch"]) //(同時執行數組中的任務,命令行直接執行gulp就能夠了)

 

8----測試環境搭建:執行以上動做後再命令中輸入: gulp

或者依次輸入:

gulp copy-html ( 即glup 任務名稱 )

gulp copy-css

gulp copy-js

gulp copy-img

gulp less

gulp server

gulp watch

9----瀏覽器中輸入地址查看:http://localhost:8888 //(8888爲端口號)