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”」のように呼びだすことができます。
さいごに
今回は動かすのに最低限の内容しかいれていません。
その他もっと効率的に開発できるものは各々入れてください。