首页 > 代码库 > vue + webpack + gulp 简单环境 搭建
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 简单环境 搭建
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。