Vue + webpack + Gulp Simple Environment setup

First, material preparation

No more nonsense, just on 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 is not selected here on the Select Development server, because its hot-swap and auto-refresh are not as friendly as the Vue components and cannot be refreshed automatically, so use Gulp Connect as the research and development server.

Ii.. webpack file Configuration

The code documentation in this article is structured as follows:

Where: The build file is used to save the compiled main portal file

SRC file is the original directory

Components for Vue component catalogs

And then look at the config file.

// path module in the Nodejs var path = require (' path '= {    resolve:{        extensions: [', '. js ', '. Vue '),        alias:{            components:path.join (__dirname,"./components")        }    },    module: {        loaders : [            /\.vue$/,loader: ' Vue ', exclude:/node_modules/},            {test:/\.js?$/,loaders:[' Babel ', ' Eslint '],exclude:/node_modules/},        ]}    };

Vue with webpack more refreshing than react, there is no entry and output, because the entrance of the two files are placed in the gulp to deal with

Here is the Gulpfile.js file:

varGulp=require ("Gulp");
It uses Webpack-stream instead of Webpack.varWebpack=require ("Webpack-stream");varVinylname=require ("vinyl-named");varConnect=require ("Gulp-connect");varWebpackconfig=require ("./webpack.config.js");//Add MD5 StampvarRev=require ("Gulp-rev");//Replace the JS reference in the original filevarRevcollect=require ("Gulp-rev-collector");varClean=require ("Gulp-clean");//Path ConfigurationvarPath={dev:{HTML:"./src", JS:"./src/js", Component:"./components"}, Clean:"./build"};//Clean upGulp.task ("clean",function(){    returnGULP.SRC (path.clean+ "/*.*"). Pipe (Clean ());});//enable Webpack, rely on cleanGulp.task ("Webpack", ["clean"],function(){    returnGulp.src ("./src/js/index.js"). Pipe (Vinylname ()). Pipe (Webpack (webpackconfig)). Pipe (rev ()). Pipe (Gulp.dest ("./build") . Pipe (Rev.manifest ()). Pipe (Gulp.dest ("./build"));});//update the old JS reference in HTMLGulp.task ("Rev", ["Webpack"],function(){    returnGULP.SRC (["./build/*.json", path.dev.html+ "/index.html"]). Pipe (Revcollect ()). Pipe (Gulp.dest ("./"));});//Creating a serverGulp.task ("Connect",function() {connect.server ({root:"./", Livereload:true    });});//Reload OperationGulp.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 component changes the role of automatic refreshGulp.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"]);

Here the Gulp management file is a simple version, because today only began to contact Gulp, so there are many functions are not perfect, such as code compression, CSS image processing, resource splitting, CSS JS injection and so on a series of functions are not added, forgive me

However, its basic function has been realized, and doing the Vue learning development environment is sufficient

Vue + webpack + Gulp Simple Environment setup