gulp+webpack配置
首先介紹一下gulp和webpack
gulp
gulp是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動化項(xiàng)目的構(gòu)建利器；她不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
gulp是基于Nodejs的自動任務(wù)運(yùn)行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟。在實(shí)現(xiàn)上，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。通過本文，我們將學(xué)習(xí)如何使用Gulp來改變開發(fā)流程，從而使開發(fā)更加快速高效。
gulp 和 grunt 非常類似，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構(gòu)建工作。
webpack
Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
**當(dāng)然個人還是喜歡webpack的模塊化優(yōu)秀
廢話不多說現(xiàn)在開始gulp之旅
初始化項(xiàng)目(此處已經(jīng)認(rèn)為node環(huán)境已經(jīng)安裝)
建立文件夾 名字自己隨便取 比如 gulpText，然后輸入以下命令
$ cd gulpText
$ mkdir images //建立存放圖片文件夾
$ mkdir src // 存放 js 以及css
$ mkdir index.html //主頁
$ mkdir gulpfile.js //編寫gulp 任務(wù)文件
$ mkdir mock //mock數(shù)據(jù)
然后輸入以下命令 然后一路點(diǎn)下去生成json文件
$npm init
打開json文件看到這樣的
全局安裝gulp以便我們運(yùn)行g(shù)ulp進(jìn)行打包等操作
$npm install gulp -g
如果感覺npm安裝比較慢可以切換至cnpm下載，代碼如下
$npm install cnpm -g
安裝gulp包，方便我們引用gulp
$npm install gulp
成功截圖
編寫gulp任務(wù)
引入 gulp
//引入gulp
var gulp = require('gulp');
拷貝Index.html
//copyhtml
gulp.task('copy-index',function () {
gulp.src('./index.html')
.pipe(gulp.dest('./build'));
})
執(zhí)行命令
$ gulp copy-index
1474890843877.png](http://upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
拷貝images
//copy images
gulp.task('copy-images',function () {
gulp.src('./images**/*')
.pipe(gulp.dest('./build/'));
})
執(zhí)行命令
$ gulp copy-iamges
css預(yù)處理
現(xiàn)在我們在src目錄里創(chuàng)建文件styles放我們的scss代碼，需要把scss代碼編譯到/build/prd/styles/下
$ cd src
$ mkdir styles
$ cd styles
$ touch app.scss
$ touch common.scss
app.scss項(xiàng)目代碼
@charset "UTF-8";
@import "./common.scss";
body{
background-color: $base-color;
color: #000;
font-size: 20px;
font-weight: 800;
}
html{
width: 100%;
height: 100%;
}
html{
width: 100%;
height: 100%;
}
.lsds{
width: 100px;
height: 100px;
}
common.scss代碼
$base-color:yellow;
安裝css預(yù)編譯包
$ npm install gulp-sass //sass編輯包
$ npm install gulp-minify-css'); //css壓縮包
//引入css預(yù)處理模塊
var sass= require('gulp-sass');
//引入css壓縮模塊
var minifyCSS = require('gulp-minify-css');
//css預(yù)處理
var cssFiles=[
'./src/styles/app.scss'
];
gulp.task('scss',function () {
gulp.src(cssFiles)
.pipe(sass().on('error',sass.logError))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/prd/styles/'))
})
編輯scss
$ gulp scss
開啟服務(wù)
安裝server包
$ npm install gulp-webserver
//引入gulp-webserver 模塊
var server = require('gulp-webserver');
gulp.task('server',function () {
gulp.src('./')
.pipe(server({
host:'127.0.0.1', //ip
port:80, //端口
directoryListing:{
enable:true,
path:'./'
},
livereload:true,
}));
})
開啟服務(wù)指令
$ gulp server
然后就可以訪問 127.0.0.1了
添加watch
//偵測文件變化， 執(zhí)行相應(yīng)的任務(wù)
gulp.task('watch',function () {
gulp.watch('./index.html',['copy-index']);
gulp.watch('./images/**/*',['copy-images']);
gulp.watch('./src/styles/*.{scss,css}',['scss','min']); //去掉min
// gulp.watch('./src/scripts/*.js',['packjs','min']) //這行先 在配置js編譯后使用的
})
//第一個參數(shù)代表監(jiān)聽的文件 第二個參數(shù)是執(zhí)行的任務(wù)
//配置default 任務(wù)，執(zhí)行任務(wù)隊(duì)列
gulp.task('default',['watch','server'],function () {
console.log('任務(wù)隊(duì)列執(zhí)行完畢');
})
配置webpack
安裝模塊
$ npm install vinyl-named
$ npm install gulp-webpack
$ npm install gulp-uglify
//引入js 模塊化工具gulp-webpack, 獲取js文件模塊 vinyl-named,js壓縮模塊
var named = require('vinyl-named');
var webpack = require('gulp-webpack');
var uglify = require('gulp-uglify');
var jsFiles = [
'./src/scripts/app.js'
];
gulp.task('packjs',function () {
gulp.src(jsFiles)
.pipe(named())
.pipe(webpack({
output:{
filename:'[name].js'
},
module:{
loaders:[
{
test:/\.js$/,
loader:'imports?define=>false'
}
]
}
}))
.pipe(uglify().on('error',function (err) {
console.log('\x07',err.linerNumber,err.message);
return this.end();
}))
.pipe(gulp.dest('./build/prd/scripts/'))
})
mock數(shù)據(jù)
在服務(wù)模塊中添加整個服務(wù)代碼為
gulp.task('server',function () {
gulp.src('./')
.pipe(server({
host:'127.0.0.1',
port:80,
directoryListing:{
enable:true,
path:'./'
},
livereload:true, //熱更新
// mock 數(shù)據(jù)
middleware:function(req,res,next){
var urlObj =url.parse(req.url,true); //req.url是整個url urlObj是請求的信息集合體
switch(urlObj.pathname){
case '/api/orders':
res.setHeader('Comtent-Type','application/json'); // //返回體的格式
fs.readFile('./mock/list.json',function(err,data){ //讀取文件
if(err){
res.send('讀取文件錯誤'); //錯誤返回 }
res.end(data); //返回json數(shù)據(jù)
});
return;
case '/api/users':
return;
case '/api/cart':
return;
}
next();
}
}));
})
版本控制
升級插件
$ npm install gulp-rev
$ npm install gulp-rev-collector
$ npm install gulp-sequence
//引入fs url模塊
var fs = require('fs');
var url = require('url');
//引入 rev revCollector 模塊 提供控制版本號的功能
var rev = require('gulp-rev');
var revCollector= require('gulp-rev-collector');
//引入gulp-sequence模塊
var sequence = require('gulp-sequence');
//版本號控制
var cssDistFile = [
'./build/prd/styles/app.css'
];
var jsDistFile = [
'./build/prd/scripts/app.js'
];
gulp.task('ver',function(){
gulp.src(cssDistFile) //執(zhí)行的文件路徑
.pipe(rev()) //生成版本號
.pipe(gulp.dest('./build/prd/styles/')) 拷貝了一份app.css
.pipe(rev.manifest()) //*生成如下的這種格式的json文件{"app.js": "app-8232057589.js"}
.pipe(gulp.dest('./build/ver/styles/')) //拷貝這個文件到指定地方
gulp.src(jsDistFile)
.pipe(rev())
.pipe(gulp.dest('./build/prd/scripts/'))
.pipe(rev.manifest())
.pipe(gulp.dest('./build/ver/scripts/'))
});
gulp.task('html',function(){
gulp.src(['./build/ver/**/*','./build/*.*'])
.pipe(revCollector())
.pipe(gulp.dest('./build'));
});
gulp.task('min',sequence('copy-index','ver','html')); //sequence串行執(zhí)行 并行使用[]
