ディレクトリ作成
mkdir gulp
作成したディレクトリに移動
cd gulp
package.json作成
pakage.jsonとはプロジェクト情報を記載するファイル。package.jsonを作成するコマンドはnpm initです。作成の際に質問されるので全てイエスで回答する場合は-yをつけます。
npm init -y
vs codeでpackage.jsonを開く
code .
gulpインストール
インストール時にdependencies(サイト動作に関わるツール）とdevDependencies(開発時に必要になるツール）を選択できる。
-DをつけてdevDependenciesとしてインストール。
npm install gulp -D
エラーが出ますが、gulpのバージョンを確認します。
npx gulp -v CLI version: 2.3.0 Local version: 4.0.2
バージョンが出るのでgulpのインストールはできている。CLIとLocalが一致していませんが、不具合ではない様です。
gulpの起動
gulp本体のファイルはプロジェクトフォルダ内の./node_modules/gulp/bin/gulp.jsです。これをコマンドで打てば実行できますが、非効率なので、パス指定を省くコマンドnpxを使います。node_modules内にあるプログラムを実行できます。
gulp実行・起動
npx gulp [15:58:30] No gulpfile found
gulpファイルがないと警告
gulpfile.js作成
プロジェクトディレクトリ直下にgulpfile.jsを作成
touch gulpfile.js //ファイル作成 code gulpfile.js //vs codeで開く
再度npx gulpで起動
npx gulp
[16:03:25] Using gulpfile ~/gulp/gulpfile.js
[16:03:25] Task never defined: default
[16:03:25] To list available tasks, try running: gulp --tasks
defaultのタスクが定義されていないと警告
タスクの定義
オブジェクトの読み込み
gulpで使う関数はオブジェクトにまとめられていて、glupモジュールに記載されている。 オブジェクトを使用するにはgulpモジュールを読み込む。
gulpfile.js
const gulp = require('gulp')
タスクの登録
gulp.task('タスク名',関数)で登録していきます。
gulpfile.js
gulp.task('default',()=>{})
これで実行すると
npx gulp [16:15:05] Using gulpfile ~/gulp/gulpfile.js [16:15:05] Starting 'default'... [16:15:05] The following tasks did not complete: default [16:15:05] Did you forget to signal async completion?
defaultタスクが完了していないと警告
gulpは非同期処理
非同期処理とはサーバがリクエストを処理して返してくれるまでの間に他の処理を進めること。非同期処理が完了した際に実行する関数をコールバック関数という。
gulpは非同期処理で動いています。
タスク完了
gulpfile.js
const gulp = require('gulp')
gulp.task('default',(done)=>{ done() })
gulp実行
npx gulp [16:26:22] Using gulpfile ~/gulp/gulpfile.js [16:26:22] Starting 'default'... [16:26:22] Finished 'default' after 2.31 ms
処理の完了ができました！
Sassコンパイル
ファイル準備・作成
|_src
|__sass
|__common.scss
gulpfile.js
const gulp = require('gulp')
gulp.task('sass',()=>{
gulp.src('./src/sass/common.scss')
})
gulp実行
npx gulp sass
[16:42:28] Using gulpfile ~/gulp/gulpfile.js
[16:42:28] Starting 'sass'...
[16:42:28] The following tasks did not complete: sass
[16:42:28] Did you forget to signal async completion?
ここまでで、読み込んだscssファイルをストリームに変換する準備が整いました。
コンパイル
下記からsassとgulp-sassプラグインの両方をインストールします。
npm i gulp-sass -D
またエラーが出ていますがpackage.jsonに記載されているのでインストールされている。
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^5.1.0",
"sass": "^1.56.1"
}
sassとgulp-sass読み込み、pipe関数でsass()関数に渡されてコンパイル。 gulp.destメソッドで書き出しを指定
gulpfile.js
const gulp = require('gulp')
const sass = require('gulp-sass')(require('sass'))
gulp.task('sass',()=>{
return gulp.src('./src/sass/common.scss')
.pipe(sass())
.pipe(gulp.dest('./dist'))
})
npx gulp sassでgulp実行
npx gulp sass [17:00:30] Using gulpfile ~/gulp/gulpfile.js [17:00:30] Starting 'sass'... [17:00:30] Finished 'sass' after 22 ms
Finishedと出ているので、書き出しされているか確認するとdistフォルダ内にcommon.cssが生成
PostCSSを利用
PostCSSとPostCSSを使うためのgulp-postcssモジュール、両方インストール。
自動でベンダープレフィックスをつけるPostCSSプラグインAutoprefixerもインストール
browserlistを指定(package.json)
browserlistで対応するブラウザを指定
{
"description": "初めてのgulp",
"repository": "git@github.com:seiko-takamori/gulp_test.git",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.13",
"gulp": "^4.0.2",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^5.1.0",
"postcss": "^8.4.19",
"sass": "^1.56.1"
},
"browserslist": [
"last 2 versions",
"> 5%",
"not ie <= 10",
"ios >= 8",
"and_chr >= 5",
"Android >= 5"
]
}
タスク組み込み(gulpfile.js)
const gulp = require('gulp')
const sass = require('gulp-sass')(require('sass'))
const postcss = require('gulp-postcss') // postcss読み込み
const autoprefixer = require('autoprefixer') // autoprefixer読み込み
// autoprefixerのoptionを指定
const autoprefixerOption = {
grid:true
}
const postcssOption = [autoprefixer(autoprefixerOption)]// gulp-postcssにプラグインを渡す配列を宣言(option指定あり）
gulp.task('sass',()=>{
return gulp.src('./src/sass/common.scss')
.pipe(sass())
.pipe(postcss(postcssOption)) //postcssOptionをpostcss関数に渡す
.pipe(gulp.dest('./dist'))
})
PostCSS Flexbugs Fixesでブラウザ差異を回避(gulpfile.js)
PostCSS Flexbugs Fixesをインストール
const gulp = require('gulp')
const sass = require('gulp-sass')(require('sass'))
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const flexBugsFixes = require('postcss-flexbugs-fixes')
const autoprefixerOption = {
grid:true
}
const postcssOption = [autoprefixer(autoprefixerOption)]
gulp.task('sass',()=>{
return gulp.src('./src/sass/common.scss')
.pipe(sass())
.pipe(postcss(postcssOption))
.pipe(gulp.dest('./dist'))
})
自動でタスクを実行
・gulp.watchメソッドで監視 ・gulp.seriesメソッドでタスクをコマンドラインからではなく、関数から実行
const gulp = require('gulp')
const sass = require('gulp-sass')(require('sass'))
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const flexBugsFixes = require('postcss-flexbugs-fixes')
const autoprefixerOption = {
grid:true
}
const postcssOption = [autoprefixer(autoprefixerOption)]
gulp.task('sass',()=>{
return gulp.src('./src/sass/common.scss')
.pipe(sass())
.pipe(postcss(postcssOption))
.pipe(gulp.dest('./dist'))
})
gulp.task('watch',()=>{
return gulp.watch('./src/sass/**/*.scss',gulp.series('sass'))
})
watchを実行 (終わる時はCtrl + C)
npx gulp watch [18:32:26] Using gulpfile ~/gulp/gulpfile.js [18:32:26] Starting 'watch'... [18:32:30] Starting 'sass'... [18:32:31] Finished 'sass' after 112 ms
