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