gulp+webpack+vue.js打造vue.js框架自动化

soul

2016年3月29日 • 3 min read

安装Babel,Vue,Gulp,WebPack

Babel

npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev

Vue

npm install vue-hot-reload-api vue-html-loader vue-loader vue-style-loader css-loader file-loader inject-loader template-html-loader url-loader --save-dev

Gulp

Gulp我用了sass 并不在vue中写style..还是不太习惯哈哈. 并且用gulp-livereload做服务端而不用webpack自带的

npm install gulp gulp-livereload gulp-sass gulp-webpack --save-dev

WebPack

npm install webpack

.babelrc

这个文件很重要如果不在项目根目录添加这个文件夹会导致webpack loader的时候报错文件内容为

{ 
 "presets": ["es2015"], 
 "plugins": ["transform-runtime"] 
}

意思就是转es2015并且加载插件

项目地址

github 参考其他vue项目

项目目录分布

根目录 -index.html gulpfile.js webpack.config.js– build -css(用来放生成的CSS) images(静态images) js(生成的js)– dev -output.js(webpack entry主文件) output.scss(sass主文件) sass(sass模块文件夹) js(*.Vue文件夹)

WebPack编写

/** 
* Created by soul on 2016/3/22. 
*/ 
const webpack=require("webpack"); 

module.exports={ 
   entry:"./dev/output.js", 
   //手动处理依赖加载 
   externals:{ 
       "jquery" : "jQuery", 
       "Vue":"Vue" 
   }, 
   //这里不指定文件路径是因为gulp.dest输出已经指定了 
   output:{ 
       filename:"main.js" 
   }, 
   module:{ 
       loaders:[ 
           {test:/\.vue$/,loader:"vue-loader"}, 
           {test:/\.js$/,loader:"babel-loader"}, 
       ], 
   }, 
   vue:{ 
       loaders:{ 
           js:"babel" 
       } 
   } 
}

Gulp编写

/** 
* Created by soul on 2016/3/14. 
*/ 
const gulp=require("gulp"); 
const sass=require("gulp-sass"); 
const webpack=require("gulp-webpack"); 
const livereload=require("gulp-livereload") 

gulp.task("default",["sass:watch","es6:watch"]); 

gulp.task("sass:watch",function(){ 
   livereload.listen(); 
   gulp.watch("./dev/**/*.scss",["sass:compile"]) 
   //这里监听index.html文件变动 
   gulp.watch("index.html",function(){gulp.src("index.html").pipe(livereload())}) 
}); 
gulp.task("sass:compile",function(){ 
   gulp.src("./dev/output.scss") 
       .pipe(sass.sync().on('error', sass.logError)) 
       .pipe(gulp.dest('./build/css')) 
       .pipe(livereload()) 
}); 

gulp.task("es6:watch",function(){ 
   //监听vue和js 
   gulp.watch("./dev/**/*.vue",["es6:compile"]) 
   gulp.watch("./dev/**/*.js",["es6:compile"]) 
}); 

gulp.task("es6:compile",function(){ 
   gulp.src("./dev/output.js") 
       //这里使用webpack处理依赖 
       .pipe(webpack(require("./webpack.config.js"))) 
       .pipe(gulp.dest("./build/js/")) 
       .pipe(livereload()) 
});

index.html引入js与css

<!DOCTYPE html> 
<html lang="zh"> 
<head> 
   <meta charset="UTF-8"> 
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 
   <meta http-equiv="X-UA-COMPATIBLE" content="IE=EDGE"> 
   <title>Title</title> 
   <link rel="stylesheet" href="build/css/normalize.css"> 
   <link rel="stylesheet" href="build/css/output.css"> 
   <script src="http://localhost:35729/livereload.js"></script> 
   <script src="build/js/jquery.min.js"></script> 
   <script src="build/js/vue.js"></script> 
</head> 
<body> 
<script src="build/js/main.js"></script> 
</body> 
</html>

output.js 文件加载管理

import HeaderNav from "./js/header.vue" 


new Vue({ 
   el:"body", 
   components:{ 
       HeaderNav 
   } 
});

./js/header.vue编写

<template id="header"> 
   <header class="nav-bg"> 
       <div class="wrap-center"> 
           <nav class="clearfix"> 
               <div class="logo"> 
                   <img src="" alt=""> 
                   <p></p> 
               </div> 
               <header-nav-list></header-nav-list> 
           </nav> 
       </div> 
   </header> 
</template> 
<style > 

</style> 

<script> 
   export default{ 
       data(){ 
           return{ 
               msg:'hello vue' 
           } 
       }, 
       components:{ 
           NavList 
       } 
   } 
</script>

只需要返回一个对象即可~剩下的vue-loader会帮你处理好

注意点

这里遇到的坑就是.babelrc文件没有建立导致loader的时候报错..剩下的参考vue的API即可