webpack #004 – gulpとBrowsersyncと連携

今回は、webpackとgulpとBrowsersyncを連携した環境を構築してみます。

まず、gulpでwebpackを読み込むために、「webpack-stream」をインストールします。
その他にもお好みで、「Node.js #023 – gulpとBrowsersyncでブラウザ同期」や必要なモジュールをインストールしておきます。


npm install -D webpack webpack-stream gulp

今回は、下記のようなディレクトリ構造にします。

それぞれのコードを記述します。

webpack.config.js


var webpack = require('webpack');

module.exports = {
    entry: './_resouce/main.js',
    output: {
        path: __dirname + '/dist/js',
        filename: 'script.js'
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};

gulpfile.js


var webpackStream = require("webpack-stream");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config");

var gulp = require('gulp');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var htmlmin = require('gulp-html-minifier');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');

var browserSync = require("browser-sync").create();
var reload = browserSync.reload;

gulp.task('BrowserSyncOn', function () {
    browserSync.init({
        server: {
            baseDir: './dist'
        }
    });
    gulp.watch("./_resouce/**/*").on("change", reload);
});

gulp.task('html-min', function () {
    return gulp.src('./_resouce/*.html')
        .pipe(htmlmin({collapseWhitespace: true,removeComments: true}))
        .pipe(gulp.dest('./dist'));
    console.log('HTMLを圧縮');
});

gulp.task('css-min', function () {
    return gulp.src('./_resouce/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'));
    console.log('CSSを圧縮');
});

gulp.task("js-min", function () {
    return webpackStream(webpackConfig, webpack)
      .pipe(gulp.dest("./dist/js"));
    console.log('JSをコンパイルして圧縮');
});

gulp.task('watch', function() {
    gulp.watch([
        './_resouce/**/*'],[
        'html-min',
        'css-min',
        'js-min'
    ]);
    console.log('更新完了!!');
});

gulp.task('default', ['BrowserSyncOn','watch'])

package.json


{
  "name": "004",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.13.0",
    "gulp": "^3.9.1",
    "gulp-html-minifier": "^0.1.8",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-watch": "^4.3.8",
    "webpack": "^3.5.4",
    "webpack-stream": "^4.0.0"
  }

main.js


import {sample01} from "./js/sample01.js";
import {sample02} from "./js/sample02.js";

sample01();
sample02();

index.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>webpack gulp Sample</title>

    <link href="./css/stylesheet.css" rel="stylesheet"/>

</head>
<body>

    <h1>webpack and gulp !!</h1>

    <script src="./js/script.js"></script>

</body>
</html>

stylesheet.css


h1 {
    color: #5FC4B6;
}

sample01.js


export function sample01() {
    console.log('sample01を実行!!');
}

sample02.js


export function sample02() {
    console.log('sample02を実行!!');
}

gulpを実行します。編集後保存すると、圧縮されたHTML・CSSとコンパイルされたJSがそれぞれ生成されます。


gulp

gulpfile.js
gulpでwebpackを読み込む：


var webpackStream = require("webpack-stream");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config")

gulpfile.js
gulpでコンパイル処理：


gulp.task("js-min", function () {
    return webpackStream(webpackConfig, webpack)
      .pipe(gulp.dest("./dist/js"));
    console.log('JSをコンパイルして圧縮');
})

webpackとgulpとBrowsersyncを利用した開発環境を構築してみました。

参考文献
webpack
gulp
Browsersync