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

標籤：src   檔案下載   動作   line   外掛程式   on()   預設   node.js   回呼函數   

web 環境搭建----前端自動化構建工具(gulp):1----先下載安裝node.js2----然後在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檔案 //建立任務/*1、建立任務 task* 2、找到目標檔案 src* 3、在pipe中執行對檔案操作的方法* 4、操作完成之後把操作完成之後的檔案放在哪裡*/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"))})//編譯lessgulp.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"))}) //servergulp.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-cssgulp copy-jsgulp copy-imggulp lessgulp servergulp watch9----瀏覽器中輸入地址查看:http://localhost:8888 //(8888為連接埠號碼)

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