■目次
Gulpの導入(SASSのコンパイルまで)Gulpの諸々を検証Gulpの設定まとめBourbon+Neat対応jQuery対応SASS(SCSS)入門TypeScript入門Compass導入についてPostCSS導入についてWebpack導入について
■Gulpの導入(SASSのコンパイルまで)
タスクランナーと呼ばれるもので、作業を自動化するツールの一つ SASSを自動でコンパイルしたりする 絶対つまずかないGulp入門。インストールからSassのコンパイルまで - ICS MEDIA https://ics.media/entry/3290 しばらく更新が止まっていたが、Ver4の開発が進められている 最新ビルドシステムGulp 4入門 〜環境構築からタスク作成まで〜 - Qiita https://qiita.com/tonkotsuboy_com/items/9ab83fe0f25cf0b010f3 ■導入 Node.jsは、Electronなど他ツールインストール時に導入済み >node -v v6.5.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('default', function() { gulp .src('sass/style.scss') .pipe(sass({ outputStyle: 'expanded' })) .pipe(gulp.dest('dist/css')); });
>npx gulp css フォルダ内に、style.scss をもとにコンパイルされた style.css が作成される 上の例はタスク名が「default」だが、それ以外の名前をつけた場合「npx 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() { gulp.watch('sass/style.scss', function() { gulp .src('sass/style.scss') .pipe(sass({ outputStyle: 'expanded' }) .pipe(sass().on('error', sass.logError)) .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() { 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() { 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() { gulp .src([ 'sass/*.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat('style.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')); });
■画像を最適化 ※要プラグインインストール >npm install -D gulp-imagemin
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() { gulp .src([ 'sass/*.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat('style.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')); }); gulp.task('image', function() { gulp .src([ 'images/*.png' ]) .pipe(imagemin()) .pipe(gulp.dest('dist/images')); }); gulp.task('default', ['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() { gulp .src([ 'sass/*.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat('style.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')); }); gulp.task('ts', function() { gulp .src([ 'ts/*.ts' ]) .pipe(typescript({ target: 'ES5', removeComments: false })) .pipe(gulp.dest('dist/js')); }); gulp.task('image', function() { gulp .src([ 'images/*.png' ]) .pipe(imagemin()) .pipe(gulp.dest('dist/images')); }); gulp.task('default', ['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() { gulp .src([ 'sass/*.scss' ]) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat('style.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')); }); gulp.task('ts', function() { 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() { gulp .src([ 'images/*.png' ]) .pipe(imagemin()) .pipe(gulp.dest('dist/images')); }); gulp.task('default', ['sass', 'ts', 'image']);
■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 今回の設定のため、以下のプラグインを追加インストール sourcemapを使う >npm install -D gulp-sourcemaps SASSの記述エラーでコンパイルできなかった時、ファイル監視が停止しないようにする >npm install -D gulp-plumber 変更された画像のみ最適化 >npm install -D gulp-changed gulp-sass で sourcemap を使う - Qiita https://qiita.com/kyaido/items/04658c04a7dbe9f05c16 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 sourcemaps = require('gulp-sourcemaps'); 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 = 'bundle.css'; gulp.task('sass', function() { gulp.watch(sass_sources, function() { gulp .src(sass_sources) .pipe(sourcemaps.init()) .pipe(plumber({ errorHandler: function(err) { console.log(err.messageFormatted); this.emit('end'); } })) .pipe(sass({ outputStyle: 'expanded' })) .pipe(concat(css_file)) .pipe(cleanCSS()) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(css_diredtory)); }); }); // TypeScript const typescript = require('gulp-typescript'); const uglify = require('gulp-uglify'); const ts_sources = [ 'assets/ts/*.ts' ]; const js_diredtory = 'js'; const js_file = 'bundle.js'; gulp.task('ts', function() { gulp.watch(ts_sources, function() { gulp .src(ts_sources) .pipe(sourcemaps.init()) .pipe(typescript({ target: 'ES5', removeComments: false })) .pipe(concat(js_file)) .pipe(uglify()) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(js_diredtory)); }); }); // Image const imagemin = require('gulp-imagemin'); const changed = require('gulp-changed'); const image_sources = [ 'assets/images/*' ]; const image_diredtory = 'images'; gulp.task('image', function() { gulp.watch(image_sources, function() { gulp .src(image_sources) .pipe(changed(image_diredtory)) .pipe(imagemin()) .pipe(gulp.dest(image_diredtory)); }); }); // Task gulp.task('default', ['sass', 'ts', 'image']);
この場合、フォルダ構成は以下のようになる assets/images/ ... 作業用画像の格納場所 assets/sass/ ... SASSの格納場所 assets/ts/ ... TypeScriptの格納場所 css/ ... 最適化後CSSの書き出し場所 images/ ... 最適化後画像の書き出し場所 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 で終了できる
■Bourbon+Neat対応
mixin集 CompassよりもBourbonとNeatを使う方が今風らしい ■環境構築 ※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) >npm install --save @types/jquery 上のコマンドを実行すると、TypeScriptが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超入門(2):構文を理解する - Qiita https://qiita.com/ringtail003/items/7ccf992f18b768e0e633 TypeScript早わかりチートシート【1.5.3対応】 - Build Insider http://www.buildinsider.net/language/quicktypescript/01 TypeScript 2 のモダンな書き方 - Qiita https://qiita.com/karak/items/ef69aa71c19932fa5c1b 【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404 JavaScriptの歴史をざっくりまとめたよ! - Qiita https://qiita.com/Mic-U/items/c900a6f62862954d62e0
■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 を参照