KumaTechLab
2020-11-01

Material Design使用のためのGulp,Webpack設定

Material Design使用のためのGulp,Webpack設定

Material Designを公式ページに乗っているWebpack設定に加えて、gulpで使用するための設定についてまとめます。

自分がscss使うのにgulpを使用しているため、設定でいろいろ試したのですが、なかなかうまくいかず結構エラーで躓きしました。

同じような人がいたらもったいないのでまとめておきます。

Webpackとgulpを使用するのはWebpackではjsをまとめるために使用し、gulpではscss側を管理するために使用しています。

Webpackのみ使用する場合は公式ページの手順に上がっているwebpack.config.jsを参考にすれば動作すると思います。

Webpack側の設定

まず、Webpack側の設定を行います。

npm install --save-dev webpack webpack-cli @babel/core babel-loader @babel/preset-env

npmで以上のものをインストールしてください。

webpackのために必要なものと、トランスパイラとしてbabelを使用します。

次に「webpack.config.js」の設定です。

module.exports = {
  mode: MODE,
  //エントリーポイント
  entry: "./js/scripts.js",
  output: {
    // 出力ファイル名
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 対象となるファイルの拡張子
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env",
              ]
            }
          },
        ],
      },
    ],
  },
};

webpack側はこれで以上です。

gulp側の設定

次にgulp側で必要なものをインストールしていきます。

npm install --seave-dev gulp gulp-sass sass webpack-stream fibers

「sass」はnode-sassではなく、dart-sassです。

「fibers」はdart-sassのコンパイル速度向上のために使用します。

「webpack-stream」はgulpからwebpackを扱うためです。

次に「gulpfile.js」の内容です。

const { src, dest, watch, series, parallel } = require("gulp");
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var fibers = require( 'fibers' );
//dart-sassの明示指定
sass.compiler = require('sass');


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


const sassCompile = done => {
	src( './scss/**/*.scss' )
	.pipe( sass( { outputStyle : 'expanded', fiber: fibers, includePaths: ['./node_modules'] } ) )
	.pipe( dest( './css' ) );
	done();
}


const bundleJs = () => {
	return webpackStream( webpackConfig, webpack )
	.pipe( dest( './' ) );
}


const watchFiles = () => {
	watch( './scss/**/*.scss', series( sassCompile ) );
	watch( './js/*.js', series( bundleJs ) );
}


exports.sass = sassCompile;
exports.default = parallel( watchFiles );

ポイントとしては

  • コンパイラの指定
  • 「includepaths」で「node_modules」を指定

を行っています。

material designでは@use構文など使用するため「node-sass」ではエラーが出てしまいます。そのため「dart-sass」である「sass」と指定します。

また、「includepaths」で「node_modules」で指定することで「@material」以下のフォルダ内容を含むことができます。これにより各sassファイル内で「@use “@material/ripple”」のように呼びだすことができます。

さいごに

今回は動かすのに最低限の内容しかいれていません。

その他もっと効率的に開発できるものは各々入れてください。

2020 KumaTechLab.