gulp結合webpack開啓多頁面模式，配置以下

首先老規矩哈、全局包安裝先

cnpm install webpack  -g

cnpm install gulp -g

cnpm 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,開發完在進行壓縮,這樣便於調試***************/
// 引入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 默認執行同步指令

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