Help us understand the problem. What is going on with this article?

gulp v4 ことはじめ 基本の基本

More than 1 year has passed since last update.

理解しやすいよう、ステップに分けて解説。
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 に以下を記述

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 にサンプルコードを書く

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 でも実行できる。

参考記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした