refirio.org

Memo

メモ > 技術 > 開発: Gulp

Gulpの導入（SASSのコンパイルまで）
タスクランナーと呼ばれるもので、作業を自動化するツールの一つ。 SASSを自動でコンパイルしたりする。 絶対つまずかないGulp 4入門(2022年版) - インストールとSassを使うまでの手順 - ICS MEDIA https://ics.media/entry/3290/ 最新ビルドシステムGulp 4入門 〜環境構築からタスク作成まで〜 - Qiita https://qiita.com/tonkotsuboy_com/items/9ab83fe0f25cf0b010f3 Gulp4がリリースされたのでgulpfile.jsをアップデートした - Qiita https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b 2019年版：Gulp4でSassをビルドしてBrowserSyncでライブプレビューする - Qiita https://qiita.com/KazuyoshiGoto/items/3059c99330cdc19e97ad Gulp4の変更点と新しい書き方 - Qiita https://qiita.com/manabuyasuda/items/0971dbd3729cf68f87fb Gulp4で作業爆速化！オススメ設定を公開する【コピペOK】 - ブログの設置 https://flex-box.net/gulp/ gulp4に移行するためにタスクを書き換えてみた ｜ 福岡のホームページ制作会社・メディア総研株式会社　マグネッツ事業部 https://magnets.jp/web_design/10404/ VSCodeでGulpを実行しJavaScriptとSassをビルドしてBrowserSyncでライブプレビューする方法 - Qiita https://qiita.com/KazuyoshiGoto/items/d00ccfcbc3d27c9eb3f6 2022年6月にIEが終了したので、以下のような意見もある。 IEが終了したので、webpackやbabelは不要？ - Qiita https://qiita.com/access3151fq/items/42b38635d81aad786e60 ■導入 Node.js https://nodejs.org/ja/ WindowsでElectronからNative Moduleを使えるようにする - Qiita https://qiita.com/maron8676/items/4457b4d70be6db260eee Node.js をインストール。 手順中の「Tools for Native Modules」の画面では、「Automatically install the necessary tools.」にチェックを入れずに進める。（デフォルトのまま。）
>node -v v14.15.0
C:\Users\refirio\gulp-test を作成しておく。 以降、gulp-test を作業フォルダとする。
>cd C:\Users\refirio\gulp-test >npm init -y
package.json が作成される。作成された内容は以下の通り。
{ "name": "gulp-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
以下のコマンドでインストール。
>npm install -D gulp
node_modules フォルダが作成され、その中に必要なファイルが作成される。 （「-D」は「--save-dev」の略） ■「npm install -D gulp」でエラー 作業フォルダ名を「gulp」にすると、package.json 内の「name」が「gulp」になり、 この状態だと「npm install -D gulp」実行時に以下のエラーになる。
>npm install -D gulp npm ERR! Windows_NT 10.0.15063 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "-D" "gulp" npm ERR! node v6.5.0 npm ERR! npm v3.10.3 npm ERR! code ENOSELF npm ERR! Refusing to install gulp as a dependency of itself npm ERR! npm ERR! If you need help, you may report this error at: npm ERR! <https://github.com/npm/npm/issues> npm ERR! Please include the following file with any support request: npm ERR! C:\Users\refirio\gulp\npm-debug.log
■SASSのコンパイル
>npm install -D gulp-sass
node_modules フォルダ内に、必要なファイルが追加作成される。 package.json と同じ場所に sass フォルダを作成する。 さらに sass フォルダ内に style.scss を作成し、以下の内容を記述する。
// ネストのテスト div { p { font-weight: bold; } } // 変数のテスト $fontColor: #525252; h1 { color: $fontColor; }
package.json と同じ場所に gulpfile.js を作成し、以下の内容を記述する。
const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('sass', function() { return gulp .src('sass/style.scss') .pipe(sass({ outputStyle: 'expanded' })) .pipe(gulp.dest('dist/css')); });
以下のコマンドでコンパイル。
>npx gulp
css フォルダ内に、style.scss をもとにコンパイルされた style.css が作成される。 上の例はタスク名が「default」だが、それ以外の名前をつけた場合「npx gulp タスク名」と実行する。 なお、Gulp3からGulp4に変更するにあたり、以下の変更が必要。（コンパイルされたが警告が表示された。）
gulp ↓ return gulp
■「npx gulp」でエラー npx は npm v5.2 から使えるコマンド。 npx が使えなかった場合、npm をバージョンアップする。
>npx gulp 'npx' は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。 >npm -v 3.10.3 >npm install -g npm >npm -v 5.6.0
■watchでSASSの自動コンパイル gulpfile.js を以下のように変更する。（「gulp.watch」を追加。）
const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('default', function() { return gulp.watch('sass/style.scss', function() { return gulp .src('sass/style.scss') .pipe(sass({ outputStyle: 'expanded' })) .pipe(gulp.dest('dist/css')); }); });
以下のコマンドでコンパイル。
>npx gulp
style.scss が監視され、変更があれば自動でコンパイルされる。 Ctrl+C で終了できる。
Gulpの諸々を検証
必ず使うタスクランナーGulpとGruntの基本コード9選 - ICS MEDIA https://ics.media/entry/9199 ■複数のファイルを一度にコンパイル
const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('default', function() { return gulp .src([ 'sass/test1.scss', 'sass/test2.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(gulp.dest('dist/css')); });
■複数のファイルをコンパイルして1ファイルに結合 ※要プラグインインストール。
>npm install -D gulp-concat
以下のように使用する。
const gulp = require('gulp'); const sass = require('gulp-sass'); const concat = require('gulp-concat'); gulp.task('default', function() { return gulp .src([ 'sass/*.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat('style.css')) .pipe(gulp.dest('dist/css')); });
■CSSファイルから改行などを削除して圧縮 ※要プラグインインストール。
>npm install -D gulp-clean-css
以下のように使用する。
const gulp = require('gulp'); const sass = require('gulp-sass'); const concat = require('gulp-concat'); const cleanCSS = require('gulp-clean-css'); gulp.task('default', function() { return gulp .src([ 'sass/*.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat('style.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')); });
■画像を最適化 ※要プラグインインストール。
>npm install -D gulp-imagemin
以下のように使用する。 画像は img に保存する。
const gulp = require('gulp'); const sass = require('gulp-sass'); const concat = require('gulp-concat'); const cleanCSS = require('gulp-clean-css'); const imagemin = require('gulp-imagemin'); gulp.task('sass', function() { return gulp .src([ 'sass/*.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat('style.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')); }); gulp.task('image', function() { return gulp .src([ 'img/*.png' ]) .pipe(imagemin()) .pipe(gulp.dest('dist/img')); }); gulp.task('default', gulp.series( 'sass', 'image' ) );
■TypeScriptをコンパイル ※要プラグインインストール。
>npm install -D typescript >npm install -D gulp-typescript
TypeScriptのファイルは ts/test.ts とし、以下を記述しておく。
var Message:string; Message = 'Hello TypeScript'; alert(Message);
以下のように使用する。
const gulp = require('gulp'); const sass = require('gulp-sass'); const concat = require('gulp-concat'); const cleanCSS = require('gulp-clean-css'); const typescript = require('gulp-typescript'); const imagemin = require('gulp-imagemin'); gulp.task('sass', function() { return gulp .src([ 'sass/*.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat('style.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')); }); gulp.task('ts', function() { return gulp .src([ 'ts/*.ts' ]) .pipe(typescript({ target: 'ES5', removeComments: false })) .pipe(gulp.dest('dist/js')); }); gulp.task('image', function() { return gulp .src([ 'img/*.png' ]) .pipe(imagemin()) .pipe(gulp.dest('dist/img')); }); gulp.task('default', gulp.series( 'sass', 'ts', 'image' ) );
■JSファイルから改行などを削除して圧縮 ※要プラグインインストール。
>npm install -D gulp-uglify
以下のように使用する。
const gulp = require('gulp'); const sass = require('gulp-sass'); const concat = require('gulp-concat'); const cleanCSS = require('gulp-clean-css'); const typescript = require('gulp-typescript'); const uglify = require('gulp-uglify'); const imagemin = require('gulp-imagemin'); gulp.task('sass', function() { return gulp .src([ 'sass/*.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat('style.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')); }); gulp.task('ts', function() { return gulp .src([ 'ts/*.ts' ]) .pipe(typescript({ target: 'ES5', removeComments: false })) .pipe(concat('script.js')) .pipe(uglify()) .pipe(gulp.dest('dist/js')); }); gulp.task('image', function() { return gulp .src([ 'img/*.png' ]) .pipe(imagemin()) .pipe(gulp.dest('dist/img')); }); gulp.task('default', gulp.series( 'sass', 'ts', 'image' ) );
■package.json をもとにインストール いつも使うGulpのプラグインをpackage.jsonで一括インストールする | WebMemo https://webmemo.work/gulp-npm-install/ 例えば以前作成した package.json がある場合、その階層で以下を実行することで同じものをインストールできる。
>npm install
package.json の内容は、一例だが以下のようなものになる。
{ "name": "gulp-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "gulp": "^4.0.2", "gulp-changed": "^4.0.2", "gulp-clean-css": "^4.3.0", "gulp-concat": "^2.6.1", "gulp-imagemin": "^7.1.0", "gulp-plumber": "^1.2.1", "gulp-sass": "^4.1.0", "gulp-typescript": "^6.0.0-alpha.1", "gulp-uglify": "^3.0.2", "typescript": "^4.0.5" } }
Gulpの設定まとめ
作業用ディレクトリを作成して以下を実行。
>npm init -y
以下のプラグインをインストール。（上で紹介したもののまとめ。）
>npm install -D gulp >npm install -D gulp-sass >npm install -D gulp-concat >npm install -D gulp-clean-css >npm install -D gulp-imagemin >npm install -D typescript >npm install -D gulp-typescript >npm install -D gulp-uglify
今回の設定のため、以下のプラグインを追加インストール。 SASSの記述エラーでコンパイルできなかった時、ファイル監視が停止しないようにする。
>npm install -D gulp-plumber
変更された画像のみ最適化。
>npm install -D gulp-changed
gulp-sass, gulp-plumberを使うときの注意 - Qiita https://qiita.com/Quramy/items/5491d8da29d1fe047464 [Gulp] これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる http://whiskers.nukos.kitchen/2014/12/13/gulp-changed.html gulpfile.js の内容は以下のとおり。
const gulp = require('gulp'); const concat = require('gulp-concat'); // SASS const sass = require('gulp-sass'); const plumber = require('gulp-plumber') const cleanCSS = require('gulp-clean-css'); const sass_sources = [ 'assets/sass/**/*.scss' ]; const css_diredtory = 'css'; const css_file = 'style.css'; gulp.task('sass', function() { return gulp .src(sass_sources, { sourcemaps: true, }) .pipe(plumber({ errorHandler: function(err) { console.log(err.messageFormatted); this.emit('end'); } })) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat(css_file)) .pipe(cleanCSS()) .pipe(gulp.dest(css_diredtory, { sourcemaps: './', })); }); // TypeScript const typescript = require('gulp-typescript'); const uglify = require('gulp-uglify'); const ts_sources = [ 'assets/ts/**/*.ts' ]; const js_diredtory = 'js'; const js_file = 'script.js'; gulp.task('ts', function() { return gulp .src(ts_sources, { sourcemaps: true, }) .pipe(typescript({ target: 'ES5', removeComments: false })) .pipe(concat(js_file)) .pipe(uglify()) .pipe(gulp.dest(js_diredtory, { sourcemaps: './', })); }); // Image const imagemin = require('gulp-imagemin'); const changed = require('gulp-changed'); const image_sources = [ 'assets/img/**/*' ]; const image_diredtory = 'img'; gulp.task('image', function() { return gulp .src(image_sources) .pipe(changed(image_diredtory)) .pipe(imagemin()) .pipe(gulp.dest(image_diredtory)); }); // Watch gulp.task('watch', function(){ gulp.watch(sass_sources, gulp.task('sass')); gulp.watch(ts_sources, gulp.task('ts')); gulp.watch(image_sources, gulp.task('image')); }); // Task gulp.task('default', gulp.task('watch'));
この場合、フォルダ構成は以下のようになる。 srcの「**/*」という指定は「すべてのファイル」という意味で、これによりフォルダに階層構造があっても処理される。 assets/img/ ... 作業用画像の格納場所。 assets/sass/ ... SASSの格納場所。 assets/ts/ ... TypeScriptの格納場所。 css/ ... 最適化後CSSの書き出し場所。 img/ ... 最適化後画像の書き出し場所。 js/ ... 最適化後JavaScriptの書き出し場所。 node_modules/ ... node.jsのモジュール。 gulpfile.js index.html ... HTMLファイル。（トップページ。） package.json package-lock.json 以下で起動する。
>cd C:\Users\refirio\gulp-test >npx gulp
Ctrl+C で終了できる。 なお Visual Studio Code を使用している場合、 メニューの「ターミナル → 新しいターミナル」を開いてそこから実行すると、余計なウインドウが開かなくていい。 ★2020/11/12 ここまで再検証した。 series() で直列処理、parallel() で並列処理になるらしい。 gulp.task() で実行している箇所を、明示的にどちらかに指定するといいかも。 ■その他 以下も参考になりそう。 VSCodeでGulpを実行しJavaScriptとSassをビルドしてBrowserSyncでライブプレビューする方法 - Qiita https://qiita.com/KazuyoshiGoto/items/d00ccfcbc3d27c9eb3f6
Bourbon+Neat対応
mixin集。 Compassはメンテナンスされていないので、今はBourbonとNeatを使う方がいいらしい。 BourbonとNeat自体も過去のものかどうかは不明。 もしくは、そろそろ素直にCSS3を使ってもいいかもしれない。 ■環境構築 ※Bourbon+NeatはただのSCSSファイルに書かれたmixin集。 よって別の環境で作成した bourbon と neat を使えば、Rubyのインストールなど環境構築は不要かも。 あらかじめRubyをインストール http://rubyinstaller.org/downloads/ から「Ruby 2.4.3-2 (x64) 」をダウンロード。 「C:\ruby」にインストール。3つのチェックボックスにチェック。
>gem update --system >gem install bourbon neat >cd C:\Users\refirio\gulp-test … プロジェクトのフォルダに移動。 >bourbon install >neat install
作成された bourbon と neat を assets\sass 内に移動させる。（プロジェクトのフォルダ階層に合わせる。） ■Gulp設定 ※この項目の手順は不要。 以下のような手順が紹介されていることがあるが、設定しなくてもBourbonとNeatが使えた。
>npm install -D node-bourbon … これは無くても動作するかも？
gulpfile.js … このファイルの以下の変更は無くても動作するみたい？
const bourbon = require('node-bourbon'); … Bourbonを読み込む。 .pipe(sass({ outputStyle: 'expanded', includePaths: bourbon.includePaths … SASSで使用する。 }))
■BourbonとNeatの使用 assets\sass\test.scss
@import "assets/sass/bourbon/bourbon"; … Bourbonを読み込む。 @import "assets/sass/neat/neat"; … Neatを読み込む。 .sample { @include clearfix; }
Sassに慣れてきたら、mixin集「Bourbon」を使ってみよう！ ｜ Tips Note by TAM https://www.tam-tam.co.jp/tipsnote/html_css/post8566.html Bourbon - Documentation https://www.bourbon.io/docs/latest/ Neat - Documentation for Version 2.1.0 https://neat.bourbon.io/docs/latest/ ■その他の参考サイト RubyInstaller2でWindows環境にRuby 2.4 + Rails 5.0.2をインストールする - Qiita https://qiita.com/jnchito/items/08b5be458134073c60e3 Gulp で SASS+Bourbon を自動ビルドする - Qiita https://qiita.com/1000k/items/83e4ab79e0a00e68130e 解説で触れられている、plumberも試したい。 CSSフレームワークBourbon超速入門 - Qiita https://qiita.com/nekoneko-wanwan/items/99d4650768c46ae41897 これからはじめるGulp #9：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え ｜ Developers.IO https://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-09/ Gulp で SCSS のコンパイルから bourbon の導入までを試す - Gulp で作る Web フロントエンド開発環境 #1 - PSYENCE:MEDIA https://tech.recruit-mp.co.jp/front-end/getting-started-gulp-sass-bourbon/
jQuery対応
index.html でjQueryを読み込み。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
ts/test.ts から呼び出し。
$(function() { alert('test!'); });
…としても、以下のようなエラーになる。 TypeScriptがjQueryの命令を解釈できない。
assets\ts\test3.ts(1,1): error TS2304: Cannot find name '$'. [00:30:12] TypeScript: 1 semantic error [00:30:12] TypeScript: emit succeeded (with errors)
以下のコマンドを実行すると、TypeScriptがjQueryの命令を解釈できるようになる。
>npm install --save @types/jquery
以下のように、TypeScriptとjQueryを併用できる。
$(function() { let message: string = 'テスト'; $('h1').text(message); });
特別なツール不要！ TypeScript 2時代の型定義ファイルの取り扱い方 - Qiita https://qiita.com/tonkotsuboy_com/items/634b0921b6170cf56813
SASS（SCSS）入門
CSSのメタ言語Sass(SCSS)、LESSの完全入門 - Qiita https://qiita.com/ritukiii/items/67b3c50002b48c6186d6 より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集 | Webクリエイターボックス https://www.webcreatorbox.com/tech/sass-mixin Sassの使い方 - 誰にとっても使いやすいCSSにするための工夫 ｜ Tips Note by TAM https://www.tam-tam.co.jp/tipsnote/html_css/post12166.html
TypeScript入門
TypeScript.txt を参考に。
Compass導入について
※検証中だったが、導入しないほうが良さそう。 Compass自体が使われなくなりつつある？Bourbonなど他のライブラリに移行されつつある？ Gulpから使う場合もRubyのインストールが必要になって煩わしい。 Compassは動作が重いらしい。 Compassを使っているとソースマップの出力ができない？ Compassを使っていると出力ファイル名を指定できない？方法はありそうな。 Gulp で SCSS のコンパイルから bourbon の導入までを試す - Gulp で作る Web フロントエンド開発環境 #1 - PSYENCE:MEDIA https://tech.recruit-mp.co.jp/front-end/getting-started-gulp-sass-bourbon/ 「SCSS フレームワークである bourbon を導入します。 少し前までは Compass を使っていましたが、やや動作が重いのとベンダープレフィクスも以前ほど意識しなくてよくなってきたことから、 より軽量な Bourbon を使うことにします。」 SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita https://qiita.com/terrierscript/items/e996c42798bbb17add13 「Compassの導入は極力避ける これは結構悩ましいが、個人的にはCompassを使わなかったことは正解かなと思っている。」 脱Compassしたいけど@importでCSSスプライトを作る機能は捨てがたかったので作った話 | GMOメディア エンジニアブログ http://tech.gmo-media.jp/post/155044941185/create-css-sprites-library-like-compass 「もう完全に過去のものとなってしまったようです。」 Compass以外のSassのフレームワーク http://blog.kzfmix.com/entry/1362478287 「Rubyの知識がないとコンパイル時になにやっているのかわからん」 Source MapでSass/Compassを簡単にCSSをデバッグする - to-R http://blog.webcreativepark.net/2013/08/22-025321.html 「CompassはまだSource Mapに対応していない」らしい。今も？ イマドキのコーダー環境構築2016 https://www.slideshare.net/sou_lab/cssnitecordershigh2016 「Compassの終焉」
>gem install compass >npm install -D gulp-compass
config.rb
cache = false
gulpfile.js
const compass = require('gulp-compass'); gulp.task('sass', function() { gulp.watch(sass_sources, function() { gulp .src(sass_sources) .pipe(compass({ config_file: 'config.rb', comments: false, css: 'css/', sass: 'assets/sass/' })); }); });
一応動くようだが要調整。 CSSファイル内で「@charset "utf-8";」の宣言が無いと、コンパイル時。 「error assets/sass/style.scss (Line 1: Invalid Windows-31J character "\xE3")」 のエラーになった。 次はWEBデザイナーがGulp+Compass+Sassでコーディング作業効率の良い環境を作ってみた[Mac] - Qiita https://qiita.com/yancharica/items/41b3bf8e33c97c74b566 compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しよう | ichimaruni-design https://ichimaruni-design.com/2015/02/comapss-gulp/ gulpでsassをコンパイルするタスクを作る - yutaponのブログ http://yutapon.hatenablog.com/entry/2014/09/11/100000
PostCSS導入について
※SASSを導入済みなら、無理に乗り換える必要は無いかも。 もうしばらく様子見で良さそう。 Step by Stepで始めるPostCSS - Qiita https://qiita.com/howdy39/items/1029e3df24ac42c7bd49 PostCSSとstylelintの環境構築 - Qiita https://qiita.com/buchiya4th/items/01b4ad050b7c59b48539
Webpack導入について
※WebpackでJavaScriptを扱うのは容易だが、CSSを扱うのは厄介みたい。 WebpackではCSSも画像もJavaScriptに変換して1ファイルとして読み込まれる。 果たしてここまですべきなのかは疑問。 「脱Webpack」の時代が来たときに厄介な負債となりそう。 Webpack.txt を参照。

Advertisement