普段はvsvcodeの拡張機能「Live Sass Compiler」を使用しているが、gulpを使用する機会があったので覚え書き
事前準備
Node.js https://nodejs.org/ja/
※インストール方法は@sefoo0104さんが紹介してくれているのでそちらを参照
・Node.jsをインストールする
gulp(ガルプ)について詳しく知りたい方は公式サイトもしくはCodeGridを参照
・gulp 公式サイト
・CodeGrid 現場で使えるgulp入門
モジュール
Node.jsの設定が終わったら以下のモジュールをインストール
※今回はカレントディレクトリにインストール
一人で開発する場合(devDependencies)
>npminstall--save-devパッケージ名>npminstall-Dパッケージ名開発環境を共有する場合(dependencies)
>npminstall--save-パッケージ名>npminstall-Sパッケージ名devDependenciesとdependenciesの違い
パッケージ(package.json)を公開した場合、開発者以外の人がnpm installを実行すると、dependenciesに記録されたパッケージがnode_modules内にインストールされ、devDependenciesに書かれているパッケージはインストールされません。
SASS、SCSSコンパイルに必要なモジュール
| モジュール名 | 内容 |
|---|---|
| gulp | gulp本体 |
| gulp-sass | Sass/SCSSのコンパイル。sourcemapが使えない |
| gulp-ruby-sass | gulp-sassと同じ処理だがこちらはsourcemapが使える |
| gulp-postcss | CSSパーサとそれを取り扱うのに便利なAPIを提供しているツール |
gulp-sassとgulp-ruby-sassはお好みの方を選択
※npmjsサイトで提供されているモジュールと設定方法が紹介されている
https://www.npmjs.com/
gulpを動かすにはgulpfile.jsが必要となるので、node_modulesと同じ階層にgulpfile.jsを作成。
gulpfile.jsの書き方は@y_sekitobaさんが紹介しているのでそちらを参照
初めてのGulp入門 ~gulpfile入門~
上記で必要最低限の環境は構築できたが、このままでは面倒な手順を踏んでgulpをインストールした意味がいないので、下記のモジュールも合わせてインストールする。
| モジュール名 | 内容 |
|---|---|
| gulp-notify | Mac,Linux,Windowに対してメッセージを通知する |
| gulp-plumber | エラーが起きても処理を中断させない |
| autoprefixer | コンパイル時にベンダープレフィックスを自動で記述してくれる |
上記インストールが完了したらnpm list --depth=0でインストールされているパッケージ名を確認。
npmlist--depth=0+--autoprefixer@9.8.6+--gulp@4.0.2+--gulp-notify@3.2.0+--gulp-plumber@1.2.1+--gulp-postcss@8.0.0+--gulp-sass@4.1.0保存時に自動でCSSを作成gulpfile.jsを下記に修正
/*
src 参照元を指定
dest 出力さきを指定
watch ファイル監視
series(直列処理)とparallel(並列処理)
*/const{src,dest,watch,series,parallel}=require('gulp');//プラグインを呼び出しconstsass=require('gulp-sass');constplumber=require("gulp-plumber");constnotify=require("gulp-notify");constpostcss=require("gulp-postcss");constautoprefixer=require("autoprefixer");//参照元パスconstsrcPath={css: '../scss/*.scss',}//出力先パスconstdestPath={css: './css',}//処理constcssSass=()=>{returnsrc(srcPath.css).pipe(plumber(//エラーが出ても処理を止めない{errorHandler: notify.onError('Error:<%= error.message %>')//エラー出力設定})).pipe(sass({outputStyle: "expanded"})).pipe(postcss([autoprefixer({browsers: ['last 2 versions']})])).pipe(dest(destPath.css))//コンパイル先
}
/***Sassファイルを監視し、変更があったらSassを変換します*/
const watchSassFiles = () => watch(srcPath.css, cssSass);
//タスクをまとめて実行exports.default=watchSassFiles;対象のscss(sass)ファイルと出力先は任意に変更」
gulpの実行
カレントディレクトリに必要なパッケージが保存されているので、下記コマンドで実行
npxgulp上記方法ではSCSS(SACC)のコンパイルを記述したが、LESSのコンパイルも用意されているので、LESSを使用している場合、必要なモジュールをインストールしてgulpfile.jsを修正。