vue + webpack + gulp 簡單環境 搭建

1、物料準備

廢話很少說，直接上 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做爲研發服務器。

2、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 而不是webpack
var 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,依賴clean
gulp.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學習性開發環境夠用了