gulp+webpack構建前端項目

標籤：return   div   pipe   []   nbsp   依賴   動態   pack   模組   

本文將介紹如何利用gulp+webpack構建一個基本的前端項目。假設你已經安裝了node環境並且會使用簡單的命令列

1、gulp安裝　　（1）全域安裝

npm install gulp -g

　　（2）查看gulp是否安裝成功

gulp -v

 

　　

　　（3）進入本地目錄，建立gulpfile.js

 

2、安裝gulp-webpack外掛程式

　　基於gulp的外掛程式非常多，建議大家查看npm官網https://www.npmjs.com

　　（1）安裝

　　webpack的用途主要是模組化+打包。安裝敲入命令

npm install gulp-webpack

　　（2）gulpfile.js中引入

　　在gulpfile.js中引入依賴，並編寫打包的出入口，這樣一個基本的gulp+webpack構建就實現了

var gulp=require(‘gulp‘);var webpack=require(‘gulp-webpack‘);gulp.task(‘default‘,function(){　　return gulp.src(‘src/entry.js‘)　　　　.pipe(webpack())　　　　.pipe(gulp.dest(‘/dist/‘));})

 

　　（3）動態擷取打包檔案入口

　　補充一個知識點，gulp的入口檔案是可以動態擷取的，比如src下的所有js目錄可以寫成“src/*.js”，但是webpack沒有這樣的統配符，所以可以結合node的模組，fs，path 或者glob來使用返回入口檔案的數組

//方法1：使用path和fs模組
function getEntry() {    var jsPath = path.resolve(srcDir, ‘js‘);    var dirs = fs.readdirSync(jsPath);    var matchs = [], files = {};    dirs.forEach(function (item) {        matchs = item.match(/(.+)\.js$/);        if (matchs) {            files[matchs[1]] = path.resolve(srcDir, ‘js‘, item);        }    });   return files;}

 

//方法2：使用glob模組glob("src/*.js",function (er, files) {   return files;})

　　關於gulp-webpack的更多用法查看網址：https://www.npmjs.com/package/gulp-webpack

　　

 

gulp+webpack構建前端項目