1. 程式人生 > >nodejs用gulp管理前端檔案方法

nodejs用gulp管理前端檔案方法

1、安裝node.js(https://nodejs.org/en/)

安裝後使用node -v檢視版本

node安裝完之後會順帶安裝npm

ps:npm其實是Node.js的包管理工具(package manager)為啥我們需要一個包管理工具呢?因為我們在Node.js上開發時,會用到很多別人寫的JavaScript程式碼。如果我們要使用別人寫的某個包,每次都根據名稱搜尋一下官方網站,下載程式碼,解壓,再使用,非常繁瑣。於是一個集中管理的工具應運而生:大家都把自己開發的模組打包後放到npm官網上,如果要使用,直接通過npm安裝就可以直接用,不用管程式碼存在哪,應該從哪下載。更重要的是,如果我們要使用模組A,而模組A又依賴於模組B,模組B又依賴於模組X和模組Y,npm可以根據依賴關係,把所有依賴的包都下載下來並管理起來。

同樣用npm -v檢視版本

2、安裝gulp外掛:npm install -g gulp

前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,群內有大量PDF可供自取,更有乾貨實戰專案視訊進群免費領取。

3、本地建立一個專案檔案並用gulp管理

1>在D盤建立要給空資料夾Gulp_Test 。Win+R開啟命令視窗並定位到當前專案目錄,然後輸入指令:npm init 回車(有git的童鞋在資料夾裡直接右鍵 git bash here也可),命令執行期間會提示輸入一些關於專案的描述資訊,非必填一路回車即可。

完成之後資料夾中會生成一個package.json檔案。

2>執行以下命令

//本地安裝: npm install gulp --save-dev (gulp外掛)
//本地安裝: npm install gulp-concat --save-dev (合併外掛)
//本地安裝:npm install gulp-uglify --save-dev (壓縮外掛)
至此,所有準備工作已就緒,開始管理我們的專案吧。
(1)在專案根目錄建立一個名為gulpfile.js的js檔案
(2)在根目錄新建js資料夾,並在資料夾中新建兩個js檔案,程式碼如下:
index.js:

var index={}; 
index={ 
test:function(argument){ 
console.log('test'); 
} 
} 
index.test();

main.js:

var main = {}; 
main.test=function(argument){ 
console.log("main test"); 
} 
main.test();

(3)在根目錄建立build資料夾,用來存放打包後的檔案

(4)編輯第(1)步建立的gulpfile.js檔案,內容如下:

var fs = require('fs');
var gulp = require('gulp');//gulp自身 
var uglify= require('gulp-uglify');//引入壓縮元件
var concat = require('gulp-concat');//引入合併組建
gulp.task('taskName', function() { 
// 找到src目錄下的所有資料夾中的所有js檔案
return gulp.src('js/*.js')
.pipe(uglify())//壓縮 
.pipe(concat('all.min.js'))//輸入到all.min.js中 
.pipe(gulp.dest('./build'))//指定目錄 
.on('end', callback);//結束事件回撥
}); 
//檢查檔案體積
function callback() {
var path = "./build/all.min.js";
var exists = fs.existsSync(path);
if (!exists) {
return;
}
var states = fs.statSync(path);
console.log("file size:" + Math.ceil(states.size / 1024) + "kb");
}

前端全棧學習交流圈:866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸,提升思維能力,群內有大量PDF可供自取,更有乾貨實戰專案視訊進群免費領取。

PS:taskName為變數,任務名。可以定義多個task,並根據glup+taskName執行不同的task

(5)執行gulp命令 :gulp taskName

(6)執行成功之後檢查build檔案是否有all.min.js生成

Don’t go too far and forget why starting!