もくじ

Gulp4で簡単、監視&自動コンパイル。はじめてのSass to css

ハウツー
コロのicon
コロ

環境確認

$ node --version v10.13.0 $ npm --version 6.4.1 $ npx --version 6.4.1

package.jsonを作成

$ npm init のあと対話式になりますが、全てエンターで作成。
作業階層のトップにpackage.json が作成されていればOKです。
$ cd gulp-project $ npm init package name: (gulp-project) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /***/gulp-project/package.json: { "name": "gulp-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) // yesと打ち込む

gulpをインストール

gulp-project 階層にいる状態で、パッケージを追加していきます。
$ npm install --save-dev gulp
node_modules というフォルダができます。
An image from Notion
package.jsonにgulpが追加されていることを確認
An image from Notion

gulpのバージョンを確認

$ gulp --version CLI version 3.9.1 Local version 4.0.2

Dart Sassのパッケージを追加

$ npm install --save-dev sass gulp-sass
ここまでがひと段落。
gulpのバージョン、gulp-sassのインストールが確認できたら次のステップへ

gulpfile.jsを作成

gulpfileにcssの生成場所、自動化の処理を書いていきます。
$ touch gulpfile.js // vscodeでファイルを追加でもOK
An image from Notion

タスクを作成

// gulpfile.js /* gulpでよく使う処理の名前 src 参照元 dest 出力先 watch ファイル監視 series (直列処理) parallel (並列処理) */ const { src, dest, watch, series, parallel } = require("gulp"); const sass = require("gulp-sass"); // compilerにdart-sassを指定 sass.compiler = require("sass"); // pathを管理 const paths = { styles: { src: "./src/assets/sass/**/*.scss", dest: "./src/assets/css", }, }; // sassコンパイルのtaskFunction const sassCompress = () => { return src(paths.styles.src) .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError)) .pipe(dest(paths.styles.dest)); }; // 変更を監視するtaskFunction const w = () => { watch(paths.styles.src, sassCompress); }; // タスクの書き方 -> task('taskName', taskFunction); task('default', sassCompress); task('sass', sassCompress); task('watch', w);

gulpを走らせるコマンドをnpmで管理

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "sass": "gulp sass", // "gulp taskName" "sass-w": "gulp watch" },

コンパイルを実行する

$ npm run sass $ npm run sass-w
destにしていた階層にstyleが生成されていれば完了です!

参考サイト

コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい