gulp+webpack配置

然后就可以访问 127.0.0.1了

添加watch

//侦测文件变化， 执行相应的任务
gulp.task('watch',function () {
                    gulp.watch('./index.html',['copy-index']);gulp.watch('./images/**/*',['copy-images']);gulp.watch('./src/styles/*.{scss,css}',['scss','min']);  //去掉min// gulp.watch('./src/scripts/*.js',['packjs','min']) //这行先 在配置js编译后使用的
})
//第一个参数代表监听的文件 第二个参数是执行的任务//配置default 任务，执行任务队列gulp.task('default',['watch','server'],function () {
                    console.log('任务队列执行完毕');
})
                   

配置webpack

安装模块

$ npm install vinyl-named
$ npm install gulp-webpack
$ npm install gulp-uglify
                   

//引入js 模块化工具gulp-webpack, 获取js文件模块 vinyl-named,js压缩模块
var named = require('vinyl-named');
var webpack = require('gulp-webpack');
var uglify = require('gulp-uglify');var jsFiles = ['./src/scripts/app.js'
];
gulp.task('packjs',function () {
                    gulp.src(jsFiles).pipe(named()).pipe(webpack({output:{filename:'[name].js'},module:{loaders:[{test:/\.js$/,loader:'imports?define=>false'}]}})).pipe(uglify().on('error',function (err) {
                    console.log('\x07',err.linerNumber,err.message);return this.end();})).pipe(gulp.dest('./build/prd/scripts/'))
})
                   

mock数据

在服务模块中添加整个服务代码为

gulp.task('server',function () {
                    gulp.src('./').pipe(server({host:'127.0.0.1',port:80,directoryListing:{enable:true,  path:'./'},livereload:true,  //热更新// mock 数据middleware:function(req,res,next){var urlObj =url.parse(req.url,true);   //req.url是整个url urlObj是请求的信息集合体switch(urlObj.pathname){case '/api/orders':res.setHeader('Comtent-Type','application/json');  // //返回体的格式fs.readFile('./mock/list.json',function(err,data){  //读取文件if(err){res.send('读取文件错误');      //错误返回 }res.end(data);   //返回json数据});return;case '/api/users':return;case '/api/cart':return;}next();}}));
})
                   

版本控制

升级插件

$ npm install gulp-rev$ npm install gulp-rev-collector$ npm install gulp-sequence
                   

//引入fs url模块
var fs = require('fs');
var url = require('url');//引入 rev revCollector 模块 提供控制版本号的功能
var rev = require('gulp-rev');
var revCollector= require('gulp-rev-collector');//引入gulp-sequence模块
var sequence = require('gulp-sequence');//版本号控制
var cssDistFile = ['./build/prd/styles/app.css'
];
var jsDistFile = ['./build/prd/scripts/app.js'
];
gulp.task('ver',function(){gulp.src(cssDistFile)  //执行的文件路径.pipe(rev())   //生成版本号.pipe(gulp.dest('./build/prd/styles/'))   拷贝了一份app.css.pipe(rev.manifest()) //*生成如下的这种格式的json文件{"app.js": "app-8232057589.js"}.pipe(gulp.dest('./build/ver/styles/'))  //拷贝这个文件到指定地方gulp.src(jsDistFile).pipe(rev()).pipe(gulp.dest('./build/prd/scripts/')).pipe(rev.manifest()).pipe(gulp.dest('./build/ver/scripts/'))
});
gulp.task('html',function(){gulp.src(['./build/ver/**/*','./build/*.*']).pipe(revCollector()).pipe(gulp.dest('./build'));});
gulp.task('min',sequence('copy-index','ver','html'));  //sequence串行执行 并行使用[]
                   

最后在github上面有源码 有兴趣可以下载看看我的gitHub账号搜 jsochen