vue + webpack + gulp 簡單環境 搭建

標籤：

一、物料準備

廢話不多說，直接上 package.json

{  "name": "vwp",  "version": "1.0.0",  "description": "vue test",  "main": "index.js",  "dependencies": {    "vue": "^1.0.26",    "vue-router": "^0.7.13"  },  "devDependencies": {    "babel-core": "^6.3.17",    "babel-eslint": "^6.1.2",    "babel-loader": "^6.2.0",    "babel-plugin-transform-runtime": "^6.3.13",    "babel-preset-es2015": "^6.3.13",    "babel-runtime": "^5.8.34",    "css-loader": "^0.23.0",    "eslint": "^3.5.0",    "eslint-loader": "^1.5.0",    "express": "^4.14.0",    "gulp": "^3.9.1",    "gulp-clean": "^0.3.2",    "gulp-connect": "^5.0.0",    "gulp-prefix": "0.0.15",    "gulp-rev": "^7.1.2",    "gulp-rev-collector": "^1.0.5",    "gulp-webpack": "^1.5.0",    "vinyl-named": "^1.1.0",    "vue-hot-reload-api": "^1.2.2",    "vue-html-loader": "^1.0.0",    "vue-loader": "^7.2.0",    "vue-style-loader": "^1.0.0",    "webpack": "^1.13.2",    "webpack-stream": "^3.2.0"  }}

這裡在選擇程式開發伺服器上並沒有選擇webpack-dev-server,因為其熱替換和自動重新整理和vue組件配合的不太友好，且不能自動重新整理，所以選用gulp connect作為研發伺服器。

二、webpack檔案配置

本文中的代碼文檔結構如下：

其中：build檔案用來儲存編譯完畢的主入口檔案

        src檔案為原始目錄

        components 為vue組件目錄

然後再看config檔案

// nodejs 中的path模組var path = require(‘path‘);module.exports = {    resolve:{        extensions: [‘‘, ‘.js‘, ‘.vue‘],        alias:{            components:path.join(__dirname,"./components")        }    },    module: {        loaders: [            {test: /\.vue$/,loader: ‘vue‘,exclude: /node_modules/},            {test:/\.js?$/,loaders:[‘babel‘,‘eslint‘],exclude: /node_modules/},        ]    }};

VUE搭配webpack比react清爽不少，這裡沒有entry和output，因為這兩個檔案的出入口被放到gulp中去處理

下面是gulpfile.js檔案：

var gulp=require("gulp");
//這裡用到了webpack-stream 而不是webpackvar webpack=require("webpack-stream");var vinylName=require("vinyl-named");var connect=require("gulp-connect");var webpackConfig=require("./webpack.config.js");//添加MD5戳var rev=require("gulp-rev");//替換原始檔案中的js引用var revCollect=require("gulp-rev-collector");var clean=require("gulp-clean");//路徑配置var path={    dev:{        html:"./src",        js:"./src/js",        component:"./components"    },    clean:"./build"};//清理gulp.task("clean",function(){    return gulp.src(path.clean+"/*.*")    .pipe(clean());});//啟用webpack,依賴cleangulp.task("webpack",["clean"],function(){    return gulp.src("./src/js/index.js")    .pipe(vinylName())    .pipe(webpack(webpackConfig))    .pipe(rev())    .pipe(gulp.dest("./build"))    .pipe(rev.manifest())    .pipe(gulp.dest("./build"));});//更新html中舊的js引用gulp.task("rev",["webpack"],function(){    return gulp.src(["./build/*.json",path.dev.html+"/index.html"])    .pipe(revCollect())    .pipe(gulp.dest("./"));});//建立伺服器gulp.task("connect",function(){    connect.server({        root:"./",        livereload:true    });});//reload操作gulp.task("reload",["rev"],function(){    gulp.src(path.dev.js+"/*.js").pipe(connect.reload());    gulp.src(path.dev.html+"./index.html").pipe(connect.reload());    gulp.src(path.dev.component+"./**.vue").pipe(connect.reload());});//watch js html 組件 三者的改變 起到自動重新整理的作用gulp.task("watch",function(){    gulp.watch(path.dev.js+"/*.js",["rev","reload"]);    gulp.watch(path.dev.html+"/index.html",["rev","reload"]);    gulp.watch(path.dev.component+"/*.vue",["webpack","rev","reload"]);});gulp.task("default",["webpack","connect","rev","watch"]);

這裡的gulp管理檔案是簡版的，因為今天才開始接觸gulp，所以裡面有很多功能不完善，比如代碼壓縮、css image處理、資源拆分、css js注入等等一系列功能都還沒加，見諒

不過其準系統已實現，做vue學習性開發環境夠用了

vue + webpack + gulp 簡單環境 搭建