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+";"+

                    "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 默认执行同步指令

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"

  }

}