Gulp+Browserify+Vueify构建vue项目

本文适用人群:

  • 已经掌握相关 Gulp 知识

  • 已经或准备开始学习 vue.js 知识

本文将和我写过的另一篇文章Gulp+Browserify 构建 react 项目采取一模一样的案例和写作手法
和 react.js 一样, vue.js 也是一个非常棒的前端框架.vue.js 也可以进行 组件化开发 ,他会导致最重要引入很多很多的js文件,像这样:

<script src='js/component1.vue'></script>
<script src='js/component2.vue'></script>
<script src='js/component3.vue'></script>
<script src='js/component4.vue'></script>

这样子会给以后代码的维护带来一定的麻烦,同时也为客户端访问网页增加了不少的Get请求.

为了消除以上的问题,我们可以使用 browserify 来将所有有依赖关系的js文件打包成单独的一个文件
compile.png

一.代码准备

先写两个简单的vue组件:

Child.vue

<template>
    <div>The Child</div>
</template>
<script>

module.exports = {
    methods: {
        test: function () {
            console.log('run it.');
        }
    }
} 

</script>

Parent.vue

<template>
    <div id="box">
        <div>helloworld</div>
        <child></child>
    </div>
</template>

<script>
module.exports = {
  components : {
    'child' : require('./Child.vue')
  }
}
</script>

然后写主页面(index.html)和主页面的入口文件(app.js)
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>browserify+vueify</title>
    </head>

    <body>
        <parent></parent>
        <script src="lib/js/vue.js"></script>
        <script src="js/bundle.js"></script>
        <!--注意这里的bundle.js是之后用gulp+browserify生成的-->
    </body>
</html>

app.js

var Parent = require('./Parent.vue');
new Vue({
  el:'body',
  components:{
    'parent': Parent
  }
});

二.安装Gulp及其相关依赖

更新 npm 到最新版本

npm install npm -g

不更新的话可能会导致无法预料的问题,最好还是更新一下

安装依赖

npm install --save-dev gulp browserify vinyl-source-stream vue vueify

如果当前你在用的vue版本是 1.x 的,就需要安装老版本的 vueify

npm install --save-dev vueify@8.5.0

三.编写 gulpfile.js

var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var vueify = require("vueify");

gulp.task('vueify', function(){
  return browserify('./src/js/app.js')
         .transform(vueify) //预处理
         .bundle() //打包
         .pipe(source('bundle.js'))
         .pipe(gulp.dest('src/js')); //输出最终文件
});

然后在命令行中运行 gulp vueify 就可以啦~

需要注意的是,如果系统变量 NODE_ENV 的值为 develop ,生成的打包文件将带有很多乱七八糟的调试信息,导致整个文件很大.

所以在命令行输入 set NODE_ENV = production 之后,就不会带有很多乱七八糟的调试信息啦~

bundle.js文件长这样子:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

module.exports = {
    methods: {
        test: function test() {
            console.log('run it.');
        }
    }
};
if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div>The Child</div>"

},{}],2:[function(require,module,exports){
'use strict';

module.exports = {
  components: {
    'child': require('./Child.vue')
  }
};
if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div id=box><div>helloworld</div><child></child></div>"

},{"./Child.vue":1}],3:[function(require,module,exports){
//var Parent = require('./Parent.jsx');
//ReactDOM.render(
//    <Parent />, 
//    document.getElementById('app')
//);

var Parent = require('./Parent.vue');
new Vue({
  el:'body',
  components:{
    'parent': Parent
  }
});
},{"./Parent.vue":2}]},{},[3]);

  JavaScript 前端 gulp vue.js