vue.js开发gulp监听文件变化自动编译
直接看代码:
var gulp = require('gulp')
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");
// gulp.task("webpack", function(callback) {
// var myConfig = Object.create(webpackConfig);
// webpack(myConfig, function(err, stats) {
// console.log(">>>>>err:"+JSON.stringify(err))
// console.log(">>>>>stats:"+stats)
// if(err) throw new Error("webpack", err);
// callback();
// });
// });
/**
* 编译时有错误提示
*/
gulp.task("webpack", function(){
return gulp.src("./app.js")
.pipe(webpack(Object.create(webpackConfig)))
.pipe(gulp.dest("./dist/"))
});
gulp.watch('./views/*', ['webpack']);
webpack.config.js
配置
var webpack = require("webpack");
module.exports = {
entry: //"./app.js",
{
app:"./app.js"
// vendor: ["./javascripts/test"]
},
output: {
path: __dirname + "/dist/",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
//{ test: /\.css$/, loader: "style!css" },
{ test: /\.vue$/, loader: 'vue-loader'},
{ test: /\.(jpg|png|gif)$/, loader: "file-loader?name=images/[hash].[ext]"}
]
},
// devtool: '#source-map',
// plugins:[
// new webpack.optimize.CommonsChunkPlugin({
// name: "vendor",//和上面配置的入口对应
// filename: "common.js"//导出的文件的名称
// })
// ]
};
不得不承认自己还是有很多不知道的配置,刚发表完本文就得知一种更高效的方式:直接用webpack自带的监听参数:>webpack -w即可实现,并且编译速度更快,从几秒降到了毫秒。