您好,登錄后才能下訂單哦!
怎么在nodejs中使用gulp管理前端文件?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
1、安裝node.js(https://nodejs.org/en/)
安裝后使用node -v查看版本
node安裝完之后會順帶安裝npm
ps:npm其實是Node.js的包管理工具(package manager)為啥我們需要一個包管理工具呢?因為我們在Node.js上開發(fā)時,會用到很多別人寫的JavaScript代碼。如果我們要使用別人寫的某個包,每次都根據(jù)名稱搜索一下官方網(wǎng)站,下載代碼,解壓,再使用,非常繁瑣。于是一個集中管理的工具應運而生:大家都把自己開發(fā)的模塊打包后放到npm官網(wǎng)上,如果要使用,直接通過npm安裝就可以直接用,不用管代碼存在哪,應該從哪下載。更重要的是,如果我們要使用模塊A,而模塊A又依賴于模塊B,模塊B又依賴于模塊X和模塊Y,npm可以根據(jù)依賴關(guān)系,把所有依賴的包都下載下來并管理起來。
同樣用npm -v查看版本
2、安裝gulp插件:npm install -g gulp
3、本地創(chuàng)建一個項目文件并用gulp管理
1>在D盤創(chuàng)建要給空文件夾Gulp_Test 。Win+R打開命令窗口并定位到當前項目目錄,然后輸入指令:npm init 回車(有g(shù)it的童鞋在文件夾里直接右鍵 git bash here也可),命令執(zhí)行期間會提示輸入一些關(guān)于項目的描述信息,非必填一路回車即可。
完成之后文件夾中會生成一個package.json文件。
2>執(zhí)行以下命令
//本地安裝: npm install gulp --save-dev (gulp插件)
//本地安裝: npm install gulp-concat --save-dev (合并插件)
//本地安裝:npm install gulp-uglify --save-dev (壓縮插件)
至此,所有準備工作已就緒,開始管理我們的項目吧。
(1)在項目根目錄創(chuàng)建一個名為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)在根目錄創(chuàng)建build文件夾,用來存放打包后的文件
(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多個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!
看完上述內(nèi)容,你們掌握怎么在nodejs中使用gulp管理前端文件的方法了嗎?如果還想學到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。