Gulp超入門 最新版のインストール〜SassとJSのタスク実行まで

Gulp4で書き方が新しくなってたので備忘録ついでにまとめてみました。

インストール

ドキュメントのインストール手順通りにインストールします。

その前にnodeが正しくインストールされてるかチェックしておきます。

node --version
npm --version

gulp-cliをインストール

npm install --global gulp-cli

プロジェクトフォルダを作成し移動

mkdir my-project
cd my-project

package.jsonの作成、質問に対しては全てエンターキー押していけばOK
Gulpのローカルインストール、ローカルバージョンが出てればOK

npm init
npm install --save-dev gulp
gulp --version

Gulpfileを作成

プロジェクトフォルダにgulpfile.jsを作成

// my-project/gulpfile.js
// タスク
function defaultTask(cb) {
  // place code for your default task here
  cb();
}
function cssTask(cb) {
  console.log('css task');
  cb();
}

// タスクの定義、ここで定義したタスクをコマンドで使用できる
exports.default = defaultTask
exports.cssTask = cssTask

実行してみます

gulp

このような結果になってればOK

[14:12:02] Using gulpfile ~/my-project/gulpfile.js
[14:12:02] Starting 'default'...
[14:12:02] Finished 'default' after 3.73 ms

あとはタスクを書いてコマンドを実行するだけ

// defaultを実行
gulp

// 特定のタスクを実行
gulp cssTask

GulpでSassのコンパイルする方法

必要なプラグインを入れます。プラグイン検索ページで必要なプラグインを検索できます。

npm install --save-dev node-sass gulp-sass

次はタスクを作成。

タスクの書き方は.pipe()のなかにやりたいことを書いていく感じ。.pipe()は必要な分だけつなげることができる。

//my-project/gulpfile.js
const { src, dest } = require('gulp');
const sass = require('gulp-sass');
 
sass.compiler = require('node-sass');

function sassCompile(cb) {
  // 複数のファイルを指定する場合は配列使用可能
  return src(['./sass/theme.scss'])
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(dest('./css'));
}

exports.default = sassCompile

gulpでタスクを実行

// sass/theme.scss
$main: #333;
body {
  color: $main;
}

// css/theme.css
body{color:#333}

Gulpでjsのminify化とuglify化する方法

必要なプラグインを入れる

npm install --save-dev gulp-uglify gulp-rename

タスクを作る

const { src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
 
sass.compiler = require('node-sass');

function jsUglify(cb) {
  // 複数のファイルを指定する場合は配列使用可能
  return src(['./js/theme.js'])
    .pipe(uglify())
    .pipe(rename({extname: '.min.js'}))
    .pipe(dest('./js'));
}

exports.default = jsUglify

gulpでタスクを実行

// js/theme.js
function testFunction(param) {
  console.log('test ',param);
}

testFunction('OK');

// js/theme.min.js
function testFunction(t){console.log("test ",t)}testFunction("OK");

まとめ

v3と書き方が少し違うのでちょっと混乱しますね。あとgulp-sassとかのドキュメントも書き方が違うので脳内補完必須。

ここではseries()とかwatch()について触れてないので機会があれば付け足したいです。