cnpm install webpack  -g

cnpm install gulp -g

cnpm install babel  -g //转换Es6

上面的整合在一起安装可以写在一起  如下

cnpm install webpack  gulp babel  -g

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,开发完在进行压缩,这样便于调试***************/
// 引入webpack
gulp.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/'));
});
// 转译Es6
gulp.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的同步处理状态
});

// 压缩js
gulp.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/')); //输出目录
})

//压缩img
gulp.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+";"+
                    ""+sprite.px.width+";"+
                    "height:"+sprite.px.height+";"+
                    "}
");
                });
                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 默认执行同步指令

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
    ]
}

{
  "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"
  }
}