说明

Vue、Grunt、Webpack的知识请看官方网站

Grunt Tasks:构建、开发调试、打包,命令:grunt build,grunt default,grunt zipall。。。
Webpack:编译Vue、压缩文件
http2:启动http/2服务,命令 node http2.js
server:启动http/1.x服务,命令:node server.js

配置

webpack.config.js

var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js',
chunkFilename: "[id].build.js?[chunkhash]" //vue-router异步加载组件,分包构建的文件命令规则
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
devtool: '#eval-source-map',
plugins:[]
}

GruntFile.js

var webpack = require("webpack");
var webpackconfig = require("./webpack.config.js");
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
build: {
src: ["dist/**/*","prod/**/*",'apistore.zip','dist.zip','html.zip'] //清空文件和文件夹
}
},
webpack:{//调用webpack功能进行编译构建
options: webpackconfig,
prod:{//产品构建
devtool: '#source-map',
plugins: webpackconfig.plugins.concat(
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
)
},
dev:{//开发环境构建
devtool: '#eval-source-map',
plugins: webpackconfig.plugins.concat(
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
)
}
},
"webpack-dev-server":{//开发调试,实时编译
options: {
webpack: webpackconfig,
publicPath: webpackconfig.output.publicPath
},
start: {
keepalive: true,
port:8086,
historyApiFallback: true,
noInfo: true,
inline:true,
hot:true,
compress: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
}
},
copy:{//拷贝文件
common:{
files: [
{expand: true, src: ['package.json'], dest: 'prod/'},
{expand: true, src: ['index.html'], dest: 'prod/'},
{expand: true, src: ['dist/**/*'], dest: 'prod/'},
]
},
http2:{
files: [
{expand: true, src: ['http2.js'], dest: 'prod/'},
{expand: true, src: ['ssl/**/*'], dest: 'prod/'}
]
},
http:{
files: [
{expand: true, src: ['http.js'], dest: 'prod/'},
{expand: true, src: ['mine.js'], dest: 'prod/'},
{expand: true, src: ['server.js'], dest: 'prod/'}
]
}
},
zip: {//打zip包
apistore:{
dest:'apistore.zip',src:['prod/**/*']
},
dist:{
dest:'dist.zip',src:['dist/**/*']
},
html:{
dest:'html.zip',src:['dist/**/*.js','dist/**/*.css']
}
},
shell: {//shell命令
options: {
stderr: true
},
dev: {
command: 'npm run dev'
}
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-zip');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-contrib-copy'); grunt.registerTask('ziph2', ['clean','webpack:prod','copy:common','copy:http2','zip:apistore']);
grunt.registerTask('ziphttp', ['clean','webpack:prod','copy:common','copy:http','zip:apistore']);
grunt.registerTask('zipall', ['clean','webpack:prod','copy:common','copy:http','copy:http2','zip:apistore']);
grunt.registerTask('build-dev', ['clean','webpack:dev']);
grunt.registerTask('build', ['clean','webpack:prod']);
grunt.registerTask('default', ["webpack-dev-server"]);
}

http2.js

var http2 = require("http2"),
url = require("url"),
path = require("path"),
fs = require("fs");
var port = 9443
,indexFile = "/index.html";//端口号和主文件地址 var options = {
key: fs.readFileSync(__dirname + '/ssl/server.key.insecure'),
cert: fs.readFileSync(__dirname + '/ssl/server.crt'),
ca: fs.readFileSync(__dirname + '/ssl/server.csr')
};
function app(request, response) {
var uri = url.parse(request.url).pathname,
filename = path.join(process.cwd(), uri);
fs.exists(filename, function(exists) {
if(!exists) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
}
if (fs.statSync(filename).isDirectory()) {
fs.exists(filename + indexFile, function(exists){
if(exists) {
fs.readFile(filename + indexFile, "binary", loadFile);
} else {
var files = fs.readdirSync(filename);
var html = '';
var showslash = uri + '/';
for (var i=0; i< files.length; i++){
if(uri == '/') {showslash = '/';} else {showslash = uri + '/';}
html += '<div><a href="' + showslash + files[i] + '">' + files[i] + "</a></div>";
}
response.writeHead(200);
response.write(html);
response.end();
}
});
} else {
fs.readFile(filename, "binary", loadFile);
}
});
function loadFile(err, file) {
if(err) {
response.writeHead(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
return;
}
response.writeHead(200);
response.write(file, "binary");
response.end();
}
}
var server = http2.createServer(options, app);
server.listen(parseInt(port, 10));
console.log("Static file server running at\n => https://localhost:" + port + "/\nCTRL + C to shutdown");

server.js

var resolve = require('path').resolve
, join = require('path').join
, exec = require('child_process').exec
, connect = require('connect')
, stylus = require('stylus')
, jade = require('jade')
, less = require('less-middleware')
, url = require('url')
,compression = require('compression')
,bodyParser = require('body-parser')
,serveStatic = require('serve-static')
,serveIndex = require('serve-index')
,morgan = require('morgan')
, fs = require('fs');
var config = {
auth:undefined,//<user>:<pass> specify basic auth credentials
logs:true,//disable request logging
format:"dev",//fmt specify the log format string
favicon:undefined,//path serve the given favicon
jade:true,//disable jade rendering
less:true,//disable less css rendering
cors:true,//allows cross origin access serving
compress:true,//gzip or deflate the response
exec:undefined,//execute command on each request
hidden:true,//enable hidden file serving
dirs:true,//disable directory serving
icons:true,//disable icons
stylus:true,//disable stylus rendering
port:9449//
}
// path
var path = resolve('.');
// setup the server
var server = connect();
// basic auth
if (config.auth) {
var user = config.auth.split(':')[0];
var pass = config.auth.split(':')[1];
if (!user || !pass) throw new Error('user and pass required');
server.use(connect.basicAuth(user, pass));
}
//
server.use(bodyParser.urlencoded());
// ignore favicon
if(config.favicon){
favicon = require('serve-favicon');
server.use(favicon(__dirname + config.favicon));
}
// logger
if (config.logs) server.use(morgan(config.format));
// convert .styl to .css to trick stylus.middleware
if (config.stylus) {
server.use(function(req, res, next){
req.url = req.url.replace(/\.styl$/, '.css');
next();
});
}
// jade
if (config.jade) {
server.use(function(req, res, next){
if (!req.url.match(/\.jade$/)) return next();
var file = join(path, url.parse(req.url).pathname);
fs.readFile(file, 'utf8', function(err, str){
if (err) return next(err);
try {
var fn = jade.compile(str, { filename: file });
str = fn();
res.setHeader('Content-Type', 'text/html');
res.setHeader('Content-Length', Buffer.byteLength(str));
res.end(str);
} catch (err) {
next(err);
}
});
});
}
// stylus
server.use(stylus.middleware({ src: path }));
// less
if (config.less) {
server.use(less(path));
}
// CORS access for files
if (config.cors) {
server.use(function(req, res, next){
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Accept, x-csrf-token, origin');
if ('OPTIONS' == req.method) return res.end();
next();
});
}
// compression
if (config.compress) {
server.use(compression());
}
// exec command
if (config.exec) {
server.use(function (req, res, next){
exec(program.exec, next);
});
}
// static files
server.use(serveStatic(path, {
maxAge: '1d',
index: ['index.html'],
//setHeaders: setCustomCacheControl,
hidden: config.hidden
}))
// directory serving
if (config.dirs) {
server.use(path,serveIndex(path, {
hidden: config.hidden
, icons: config.icons
}));
}
// start the server
server.listen(config.port, function () {
console.log('\033[90mserving \033[36m%s\033[90m on port \033[96m%d\033[0m', path, config.port);
});

package.json

{
"name": "apistore",
"description": "interferce project",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.dev.config.js --inline --hot --port 8086",
"build": "cross-env NODE_ENV=production webpack --config ./webpack.prod.config.js --progress --hide-modules",
"serve": "node server.js",
"http2": "node http2.js"
},
"dependencies": {
"element-ui": "^1.0.0",
"vue": "^2.1.4",
"vue-router":"^2.1.1",
"http2":"^3.3.6",
"http2-static-server":"^1.0.0",
"serve": "^1.4.0",
"path":"0.12.7",
"http":"0.0.0",
"connect": "3.5.0",
"jade": "*",
"less-middleware": "*",
"stylus": "*",
"serve-favicon":"2.3.2",
"compression":"1.6.2",
"body-parser":"1.15.2",
"serve-static":"1.11.1",
"serve-index":"1.8.0",
"morgan":"1.7.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.13.2",
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"vue-loader": "^9.5.1",
"webpack": "2.1.0-beta.22",
"webpack-dev-server": "^2.1.0-beta.0",
"path":"0.12.7",
"serve": "^1.4.0",
"mockjs":"^1.0.1-beta3",
"grunt-contrib-copy":"^1.0.0",
"grunt-zip":"^0.17.1",
"grunt-contrib-imagemin":"^1.0.1",
"grunt-contrib-clean":"^1.0.0",
"grunt-contrib-requirejs":"^1.0.0",
"grunt-webpack":"^1.0.18",
"http2":"^3.3.6",
"http2-static-server":"^1.0.0",
"grunt":"^1.0.1",
"grunt-contrib-watch":"^1.0.0",
"grunt-shell":"^2.1.0"
}
}

Vue+Webpack+Grunt集成的更多相关文章

  1. vue,webpack,node间的关系

    针对在“思否”上看到的关于vue,node,webpack的一些问题及回复,做出如下的整理,给同样不是很清楚的朋友做了解,也供自己学习 原链接:https://segmentfault.com/q/1 ...

  2. vue与TypeScript集成配置最简教程

    https://blog.csdn.net/u014633852/article/details/73706459 https://segmentfault.com/a/119000001187808 ...

  3. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(五)预加载和Electron自动更新

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  4. vue+webpack实践

    最近使用了vue来做SPA应用,记一波学习笔记. 使用vue+webpack实现前端模块化. vuejs——轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 推荐官方文档 vue.js官方文 ...

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

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  6. Vue + Webpack + Vue-loader 1

    Vue + Webpack + Vue-loader 原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue ...

  7. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

  8. 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

    如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...

  9. vue学习:vue+webpack的快速使用指南(新手向)

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

随机推荐

  1. 用 R 进行高频金融数据分析简介

    作者:李洪成 摘自:http://cos.name/wp-content/uploads/2013/11/ChinaR2013SH_Nov03_04_LiHongcheng.pdf 高频数据 金融市场 ...

  2. 【Visual Lisp】图元选择集专题

    图元选择集专题;;★★★01.选择集操作★★★(setq ss (ssadd));;创建一个空选择集(ssadd (car(entsel)) ss);;将点取的图元添加到ss选择集中,可以不用setq ...

  3. 「2014-3-18」multi-pattern string match using aho-corasick

    我是擅(倾)长(向)把一篇文章写成杂文的.毕竟,写博客记录生活点滴,比不得发 paper,要求字斟句酌八股结构到位:风格偏杂文一点,也是没人拒稿的.这么说来,arxiv 就好比是 paper 世界的博 ...

  4. IOS绘制渐变背景色折线图的一种尝试

    1.绘制折线图 上次在群里看到一个折线图划的很漂亮,自己想实现一个这样的 ,但是一直没什么头绪,不知道怎么做,就开始在网上查找划线,绘 制渐变色这一块的内容,用最笨的方式,自己尝试的写了一些,也没 有 ...

  5. [收集]在iPhone桌面的应用程序图标右上角显示数字

    能够在ios桌面的程序icon右上角显示数字(badge number)的方法 在ViewController中的viewDidLoad方法中添加如下代码即可 - (void)viewDidLoad ...

  6. [转] spring @Entity @Table

    实体bean,entity 注解设置 持久化是位于JDBC之上的一个更高层抽象.持久层将对象映射到数据库,以便在查询.装载.更新或删除对象的时候,无须使用像JDBC那样繁琐的API.EJB的早期版本中 ...

  7. C++多态(二)——函数重载(overloading)和操作符重载

       任何函数都能重载. 一.普通函数的重载 C语言中一个函数只能处理一个类型的数据,不可能兼顾两种或多种数据类型:C++使用使用同一名称的函数来处理多个类型的数据. #include <ios ...

  8. springMVC静态文件访问

        web.xml文件  <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xs ...

  9. TFT-LCD的相关概念

    显示尺寸(display size) 是指实际可视区域的对角线长度,单位是英寸,简称寸(1英寸=2.54厘米). 长宽比(aspect ratio) 是指TFT-LCD可视区域的长度和宽度之比,也叫做 ...

  10. C++混合编程之idlcpp教程Lua篇(8)

    上一篇在这 C++混合编程之idlcpp教程Lua篇(7) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程LuaTutorial6中,同样加入了四个文件:LuaTutori ...