首先老规矩哈、全局包安装先
cnpm install webpack -gcnpm install gulp -gcnpm install babel -g //转换Es6上面的整合在一起安装可以写在一起 如下cnpm install webpack gulp babel -g
gulpfile.js gulp的配置文件
var gulp = require('gulp'), browserSync = require('browser-sync').create(), plugins = require('gulp-load-plugins')(), //自动加载插件的插件，之后就可以不直接引用插件 reload = browserSync.reload, spritesmith = require('gulp.spritesmith'),//合并雪碧图 babel = require("gulp-babel"), //转编成Es6 plumber = require("gulp-plumber"),//编译时出错不会终止gulp,结合gulp-notify使用可以弹窗提醒 notify = require("gulp-notify"),//为gulp-plumber 报错提供弹窗 webpack = require('webpack-stream'), //引入webpack named = require('vinyl-named'); //输出时对应webpack的文件名 防止输出hash值/************先不压缩css,js,开发完在进行压缩,这样便于调试***************/// 引入webpackgulp.task('webpack', function(){ return gulp.src('webpackDemo/*js') .pipe(plumber({errorHandler: notify.onError({title: '小智哥编译出错啦',message: '<%=error%>'})})) .pipe(named()) .pipe(webpack(require("./webpack.config.js"))) .pipe(gulp.dest('webpackPage/'));});// 转译Es6gulp.task('Es6',function(){ return gulp.src('src/es6/*js') .pipe(plumber({errorHandler: notify.onError({title: '小智哥编译出错啦',message: '<%=error%>'})})) //有时候失效 .pipe(babel({presets: ['es2015']})) .pipe(plugins.uglify()) //压缩js .pipe(gulp.dest('dist/es6/')); })// scss编译后的css将注入到浏览器里实现更新gulp.task('sass', function() { return gulp.src('src/sass/*.scss')//引入要编译的文件目录 .pipe(plumber({errorHandler: notify.onError({title: '小智哥编译出错啦',message: '<%=error%>'})})) .pipe(plugins.sass()) //编译sass .pipe(plugins.cleanCss()) //压缩编译后的css .pipe(gulp.dest('dist/css/')) //输出目录 .pipe(reload({stream: true})); //browserSync的同步处理状态});// 压缩jsgulp.task('compressJs',function(){ return gulp.src('src/js/*js') .pipe(plumber({errorHandler: notify.onError({title: '小智哥编译出错啦',message: '<%=error%>'})})) .pipe(plugins.uglify()) //压缩js .pipe(gulp.dest('dist/js/'));})// 公用的css处理gulp.task('publicCss',function(){ return gulp.src('src/publicCss/*css') //压缩公用的css .pipe(plugins.cleanCss()) //压缩编译后的css .pipe(gulp.dest('dist/publicCss/')); //输出目录})//压缩imggulp.task('compressImg', function (){ return gulp.src('src/images/*.{jpg,png}') // .pipe(plugins.smushit()) //等项目开发完再压缩图片，因为压缩图片很费时间 .pipe(gulp.dest('dist/images/'));});// 生成雪碧图gulp.task('spriteImg', function () { return gulp.src('src/spriteImg/*.png')//需要合并的图片地址 .pipe(spritesmith({ imgName: 'spriteImg.png',//保存合并后图片的地址 cssName: 'sprite.css',//保存合并后对于css样式的地址 padding:5,//合并时两个图片的间距 algorithm: 'binary-tree',//默认位置，现在市值为左边开始 cssTemplate: function (data) { //cssTemplate 是生成css的模板文件可以是字符串也可以是函数。下面以js函数为例子 var arr=[]; data.sprites.forEach(function (sprite){ arr.push(".icon-"+sprite.name+ "{" + "background-image: url('"+sprite.escaped_image+"');"+ "background-position: "+sprite.px.offset_x+" "+sprite.px.offset_y+";"+ "width:"+sprite.px.width+";"+ "height:"+sprite.px.height+";"+ "}\n"); }); return arr.join(""); } })) .pipe(gulp.dest('dist/spriteImg'));});// 静态服务器 + 监听 scss/html 文件gulp.task('serve', ['sass','Es6','compressJs','webpack','publicCss','compressImg','spriteImg'], function() { browserSync.init({ server: { baseDir: "./", //默认的文件打开入口 // index:'banner.html' //自定义的打开入口 }, open:false,//停止自动打开浏览器 port: 9000, //修改端口 ui:{port: 9001}// 后台ui的设置，里面可以设置页面是否联动，默认是联动的 }); // 监控webpack gulp.watch('webpackDemo/*.js', ['webpack']); //执行webpack gulp.watch('webpackPage/*.js').on('change',reload); //执行webpack后监控它执行的目标文件,有变化则刷新页面 // 雪碧图 gulp.watch('src/spriteImg/*.png', ['spriteImg']); //执行sprite gulp.watch('dist/spriteImg').on('change',reload); //执行sprite后监控它执行的目标文件,有变化则重新生成雪碧图 // 监听Es6 gulp.watch('src/es6/*.js', ['Es6']); //执行Es6 gulp.watch('dist/es6/*.js').on('change',reload); //执行Es6后监控它执行的目标文件,有变化则刷新页面 // 监听根目录html gulp.watch("./*.html").on('change',reload); //监控html 只能在根目录 // 监听sass gulp.watch('src/sass/*.scss',['sass']); //开启了browserSync监控就执行sass gulp.watch("dist/css/*.css").on('change',reload); //执行sass后监控它生成的目标文件,有变化就刷新页面 //公用的css gulp.watch('src/publicCss/*.css',['publicCss']); gulp.watch('dist/publicCss/*.css').on('change',reload); //监听js gulp.watch('src/js/*js', ['compressJs']); //开启了browserSync监控就执行 compressJs gulp.watch('dist/js/*.js').on('change',reload); //监控引入的js当js改变页面也同时进行 // 执行压缩img gulp.watch('src/images/*.{jpg,png}',['compressImg']); //开启了browserSync监控就执行 compressImg gulp.watch('dist/images/*.{jpg,png}').on('change',reload); });gulp.task('default', ['serve']); //gulp 默认执行同步指令 webpack.config.js webpack的配置文件
var webpack = require('webpack');module.exports={ module:{ loaders:[ { test:/\.css$/,//匹配.css文件 loader:'style-loader!css-loader'//用style-loader去解释css } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin({compress: {warnings: false} }) //自动输出压缩后的js，css ]} 下面是package.json的依赖包列表
{ "scripts": { "xz": "gulp" }, "devDependencies": { "babel-preset-es2015": "^6.24.1", "browser-sync": "^2.18.12", "css-loader": "^0.28.4", "gulp": "^3.9.1", "gulp-babel": "^6.1.2", "gulp-clean-css": "^3.4.2", "gulp-load-plugins": "^1.5.0", "gulp-notify": "^3.0.0", "gulp-plumber": "^1.1.0", "gulp-sass": "^2.3.2", "gulp-smushit": "^1.2.0", "gulp-uglify": "^3.0.0", "gulp.spritesmith": "^6.5.1", "style-loader": "^0.18.2", "uglify-js": "^3.0.20", "vinyl-named": "^1.1.0", "webpack": "^3.0.0", "webpack-stream": "^3.2.0" }}