ウィルスタイル株式会社 / Will Style Inc.

使用するビルドツール

今まではgulpでBrowserifyを使用していましたが今流行のWebpackに移行しました。
本来Webpackはアセットファイルを一つのJSファイルに統合するのが目的のビルドツールですが、Webサイト制作ではgulpでJSのトランスパイラとして使います。

gulp

Webpack

まずWebpack、gulpをグローバルインストールします。

npm install -g webpack gulp

次にワーキングディレクトリにもインストールします。

npm install --save-dev webpack gulp

必要なパッケージをインストールする

必要なパッケージをインストールします。
今回使用するのは以下のパッケージです。

babel-core
babel-loader
babel-preset-es2015
browser-sync
gulp-sass
gulp-plumber
gulp-webpack
gulp-imagemin

ではインストールします。

npm install --save-dev babel-core babel-loader babel-preset-es2015 browser-sync gulp-sass gulp-plumber gulp-webpack gulp-imagemin

gulpfile.jsを作成する

それではgulpの設定ファイルを作成します。

僕は以下のようにしました。
ディレクトリ構成は個人的な仕様のため適宜変更ください。

// gulpfile.js
var browserSync = require('browser-sync'),
    gulp        = require('gulp'),
    sass        = require('gulp-sass'),
    plumber     = require('gulp-plumber'),
    webpack     = require('gulp-webpack')
    imagemin    = require("gulp-imagemin");



gulp.task('sass', function() {
    gulp.src("src/sass/*.scss")
        .pipe(plumber())
        .pipe(sass({outputStyle: 'compressed'}))
        .on('error', function(err) {
          console.log(err.message);
        })
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

gulp.task('webpack',function(){
    gulp.src(['src/js/app.js'])
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest("dist/js"))
    .pipe(browserSync.stream());
});

gulp.task('js-watch', ['webpack'], function (done) {
    browserSync.reload();
    done();
});

gulp.task('imagemin', function(){
  return gulp.src('src/img/**/*')
  .pipe(imagemin({
    verbose: true,
    progressive: true,
    plugins: [
      imagemin.gifsicle({interlaced: true}),
      imagemin.jpegtran({progressive: true}),
      imagemin.optipng({optimizationLevel: 5}),
      imagemin.svgo({plugins: [{removeViewBox: true}]})
      ]
  }))
  .pipe(gulp.dest('img'));
});

gulp.task('serve', ['sass','webpack'], function() {
    browserSync.init({
        server: "./"
    });

    gulp.watch(["src/sass/*.scss","src/sass/**/*.scss"], ['sass']);
    gulp.watch(["src/js/app.js","src/js/lib/*.js"],["webpack"]);
    gulp.watch(["*.html","**/*.html"]).on('change', browserSync.reload);
    gulp.watch("src/img/**/*", ['imagemin']);
});


gulp.task("default",['serve']);

構造としては
./src/js/app.jsをトランスパイルし、optimizeしてdist/js/bundle.jsに出力する。
./src/sass内のScssファイルをsassコンパイルしてdist/cssに出力する。
./src/img/内の画像を圧縮し./img/に出力する。
以上の3点を実行しています。

JSはapp.js内でモジュールをimportする方式で使用します。

//例えばまだまだjQueryを使用したい方
import $ from 'jquery'; // パッケージがない方はnpm install --save-dev jqueryをしましょう。

webpack.confg.js

process.noDeprecation = true;
const webpack = require("webpack")
      ,path = require('path');

module.exports = {
    entry: path.join(__dirname , "src/js/app.js"),
    output: {
      filename: 'bundle.js'
    },
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
        compress: { warnings: false }
      })
    ],
    module: {
      loaders: [
        { 
          test: /\.js$/, 
          exclude: /node_modules/, 
          loader: "babel-loader", 
          query:{
            presets: ['es2015']
          }
        }
      ]
    }
}

上記で以下のコマンドを実行すればgulpが立ち上がり、ブラウザーが自動起動します。

gulp

最後に

いかがだったでしょうか？サイト制作がメインの自分は、「Webpack自体はあまり使い所がないかなー」と思いつつ、でも最新の環境で構築したいという思いからこのような構成に至りました。
何より、脱jQueryとIE9、IE10を切ってもいいという転換期なのが重い腰をあげてくれました。
今回の方法ではまだまだWebpackのちからを最大限には活かせていませんが、まずは今ある環境を移行し、モダンな環境でサイトを制作するというのもいいと思います。

Webpackで簡単にCSSスプライトを作れたり、CSSをJSで読み込んだり本当に色々と出来ます。
皆さんも是非試してみてください。