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 而不是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学习性开发环境够用了

时间: 09-21

vue + webpack + gulp 简单环境 搭建的相关文章

windows环境下搭建vue+webpack的开发环境

前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我要把我所参考的文档和实际遇到的问题分享给大家.由于本人也是初级菜鸟一枚,如果有错误,还望谅解指正.下面言归正传: 所参考的文档链接:http://blog.csdn.net/syyling/article/details/52004892 http://www.cnblogs.com/ixxonli

使用ES6+Vue+webpack+gulp构建新一代Web应用

1.推荐学习网站:Vue.js中国 2.Demo环境搭建: 2.1环境配置 安装nodejs环境,具体内容可以百度: 新建一个文件夹: mkdir VUE-ES6-WebPack 全局安装gulp: npm install gulp -g 全局安装webpack: npm install webpack -g 2.2webpack使用 在VUE-ES6-WebPack目录先新建一个webpack.config.js文件,粘贴以下代码: 1 module.exports = { 2 // 这是一个

webpack+react开发环境搭建

一.安装Node.js Node.js可以直接从官网下载,按照默认的安装方式安装即可. 二.安装webpack Webpack可以使用npm安装,新建一个空的练习文件夹,在终端中转到该文件夹后执行下述指令就可以完成安装. //全局安装 npm install -g webpack //安装到你的项目目录 npm install --save-dev webpack 三.安装webpack-dev-server //全局安装 npm install -g webpack-dev-server //

Vue + Webpack 根据不同环境打包

修改 prod.env.js // 当前正在运行的脚本名称 const TARGET = process.env.npm_lifecycle_event // 第一个参数 let argv = process.argv[2] || '' var merge = require('webpack-merge') var prodEnv = { NODE_ENV: '"production"', API_BASH_PATH: '"https://app.binvshe.com&q

vue.js开发环境搭建以及创建一个vue实例

Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js 之前首先需要搭建 vue.js 的开发环境,下面,我们就来一步一步的搭建 vue.js 的环境: 1.首先,我们需要安装 node.js: 安装 node.js 请参考  node.js安装配置 ,可以打开命令行,输入 node -v,如果输出版本号,说明我们安装 node 环境成功,输入 npm

vue.js在windows10系统下的环境搭建

vue.js在windows10系统下的环境搭建流程 1.安装node.js(node包含了npm包管理器) node.js安装包以及源码下载地址:https://nodejs.org/en/download/ 注意:使用安装包(.msi)(作为小白的我,直接用了.exe,导致环境变量都不会自动配置,真的挺郁闷的) 下载下来以后可以直接双击安装,按照提示一步步安装. 详细的安装步骤可看网址:http://www.runoob.com/nodejs/nodejs-install-setup.htm

vue.js开发环境搭建

1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装...2).输入:vue -V,回车,若出现vue信息说明表示成功 4.创建vue项目 在cmd里输入:vue

jenkins gulp 持续集成环境搭建

本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.然后教你jenkins如何集成前端构建工具Gulp.不要怕,jenkins gulp 持续集成环境搭建其实也很简单,我会分为五步向你介绍jenkins gulp 持续集成并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 https://nodejs.org/en/download/ 下载得到这样的一个文件node-v6.9.

MyBatis学习笔记一:MyBatis最简单的环境搭建

MyBatis的最简单环境的搭建,使用xml配置,用来理解后面的复杂配置做基础 1.环境目录树(导入mybatis-3.4.1.jar包即可,这里是为后面的环境最准备使用了web项目,如果只是做 mybatis的环境,普通java项目即可 ) 2.Person.java(纯POJO对象类) package com.orange.model; public class Person { private String name; private String address; public Stri