理解しやすいよう、ステップに分けて解説。
babel を使い、ES2015 (ES6) で書く。
前準備
"project/" ディレクトリをルートとし、その中で作業する。
以下、最終的なファイル構成。
project/
├ package.json
├ package.lock.json
├ gulpfile.babel.js
├ .babelrc
├ node_modules/
│ └ インストールした npm パッケージ群
├ (style.css) // gulp の CSS タスクで style.scss から生成
└ src/
└ style.scss
package.json の作成 (-y は全てyes設定)
npm init -y
ES6 → ES5 のトランスパイルに必要なパッケージをインストール
npm install -D babel-core babel-preset-env
この時、package.lock.json が自動で生成される
gulpfile.babel.js、.babelrc、Sassファイルの作成
mkdir src | touch src/style.scss gulpfile.babel.js .babelrc
".babelrc" (bebel の変換設定ファイル) に以下を記述
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions"]
}
}]
]
}
gulp本体のインストール
npm install -D gulp@next
※ @nextを付けないとv3.9が入る (2018年4月8日現在)
gulp のコマンドを試してみる。
npx gulp -v → バージョンが表示される
補足：
npm 5.2 以降は npx コマンド でパッケージを直接実行できる。
gulp のグローバルへのインストールや、package.json の "scripts" 経由での実行は不要。
gulp のタスクを書く
サンプルとして、gulp-sass パッケージ を使い、SCSS から CSS に変換するタスクを書く。
gulp-sass をインストール
npm install -D gulp-sass
gulpfile.babel.js に以下を記述
import gulp from 'gulp';
import sass from 'gulp-sass';
// パスの設定 (他タスクが増えた時に管理しやすいように)
const paths = {
css: {
src: './src/style.scss',
dest: './'
}
};
// `npx gulp css` で実行される CSS タスク
export function css() {
return gulp.src(paths.css.src)
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest(paths.css.dest));
}
css.description = '変換：SCSS → CSS'; // gulp --tasks で注釈を表示
// `npx gulp` で実行されるデフォルトタスク
export default css;
タスクの書き方は何通りかあるが、今回は関数をそのままエクスポートする書き方を使った。関数名がタスク名となる。
タスクを実行する
src/style.scss にサンプルコードを書く
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
npx gulp css で、CSS タスクを実行。
project/src/style.scss → project/style.css が生成される。
(※ "Failed to load external module @babel/register" とエラーが出るが、動作は問題ない。
babel-register をインストールしても同エラーは消えなかった)
default タスクに CSS タスクをセットしているので、npx gulp でも実行できる。