快捷導(dǎo)航

nodejs用gulp管理前端文件方法

更新時(shí)間：2018年06月24日 15:56:55 作者：Dupont

本篇文章給大家分享了nodejs用gulp管理前端文件的步驟方法以及優(yōu)缺點(diǎn)分析，有興趣的朋友參考下。

1、安裝node.js（https://nodejs.org/en/）

安裝后使用node -v查看版本

node安裝完之后會(huì)順帶安裝npm

ps：npm其實(shí)是Node.js的包管理工具（package manager）為啥我們需要一個(gè)包管理工具呢？因?yàn)槲覀冊(cè)贜ode.js上開發(fā)時(shí)，會(huì)用到很多別人寫的JavaScript代碼。如果我們要使用別人寫的某個(gè)包，每次都根據(jù)名稱搜索一下官方網(wǎng)站，下載代碼，解壓，再使用，非常繁瑣。于是一個(gè)集中管理的工具應(yīng)運(yùn)而生：大家都把自己開發(fā)的模塊打包后放到npm官網(wǎng)上，如果要使用，直接通過(guò)npm安裝就可以直接用，不用管代碼存在哪，應(yīng)該從哪下載。更重要的是，如果我們要使用模塊A，而模塊A又依賴于模塊B，模塊B又依賴于模塊X和模塊Y，npm可以根據(jù)依賴關(guān)系，把所有依賴的包都下載下來(lái)并管理起來(lái)。

同樣用npm -v查看版本

2、安裝gulp插件：npm install -g gulp

3、本地創(chuàng)建一個(gè)項(xiàng)目文件并用gulp管理

1>在D盤創(chuàng)建要給空文件夾Gulp_Test 。Win+R打開命令窗口并定位到當(dāng)前項(xiàng)目目錄，然后輸入指令：npm init 回車（有g(shù)it的童鞋在文件夾里直接右鍵 git bash here也可），命令執(zhí)行期間會(huì)提示輸入一些關(guān)于項(xiàng)目的描述信息，非必填一路回車即可。

完成之后文件夾中會(huì)生成一個(gè)package.json文件。

2>執(zhí)行以下命令

//本地安裝: npm install gulp --save-dev (gulp插件)

//本地安裝: npm install gulp-concat --save-dev (合并插件)

//本地安裝：npm install gulp-uglify --save-dev (壓縮插件)

至此，所有準(zhǔn)備工作已就緒，開始管理我們的項(xiàng)目吧。

（1）在項(xiàng)目根目錄創(chuàng)建一個(gè)名為gulpfile.js的js文件

（2）在根目錄新建js文件夾，并在文件夾中新建兩個(gè)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）在根目錄創(chuàng)建build文件夾，用來(lái)存放打包后的文件

（4）編輯第（1）步創(chuàng)建的gulpfile.js文件，內(nèi)容如下:

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);//結(jié)束事件回調(diào)
}); 
//檢查文件體積
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");
}

PS：taskName為變量，任務(wù)名?？梢远x多個(gè)task，并根據(jù)glup+taskName執(zhí)行不同的task

（5）執(zhí)行g(shù)ulp命令：gulp taskName

（6）執(zhí)行成功之后檢查build文件是否有all.min.js生成

Don't go too far and forget why starting！

您可能感興趣的文章: