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.