LoginSignup
1

More than 5 years have passed since last update.

gulp導入メモ

Posted at

node.jsをインストールする

環境に合ったものを。

gulpでタスクを走らせるディレクトリに移動

$ mkdir /path/to/target/dir
$ cd /path/to/target/dir

なければ作る。

npmの初期設定をする

$ npm init

ウィザード形式でいろいろ聞かれるので答える。
それを反映したpackage.jsonがカレントディレクトリ以下に作成される。

package.json
{
    "name": "hoge",
    "version": "1.0.0",
    "description": "piyo",
    "main": "index.js",
    "directories": {
        "doc": "docs"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "fuga",
    "license": "MIT"
}

gulpをインストールする

グローバルインストール

$ npm install gulp --global

node.js配下のディレクトリにパッケージが展開される。
同時にパスが通り、gulpをコマンドで呼び出せるようになる。

開発環境(ローカル)にインストール

$ npm install gulp --save-dev

globalオプションがないnpm installは、パッケージが
カレントディレクトリ下のnode_modulesディレクトリに展開される。
save-devオプションをつけることで、インストールしたパッケージを
devDependenciesとして自動的にpackage.jsonに反映させる。

package.json
{
    ...,
    "devDependencies": {
        "gulp": "^3.9.0"
    },
    ...
}

gulpを設定する

gulpfile.jsの作成

package.jsonと同じディレクトリにgulpfile.jsを作成する。

gulpfile.js
var gulp = require('gulp');

処理を追加する

例として、sassのコンパイルを行うパッケージgulp-sassの導入手順を記載する。

パッケージのインストール

$ npm install gulp-sass --save-dev

ローカルのnode_modulesディレクトリにgulp-sassパッケージを展開。
package.jsonは以下のように自動的に修正される。

package.json
{
    ...,
    "devDependencies": {
        "gulp": "^3.9.0",
        "gulp-sass": "^2.1.0"
    },
    ...
}

タスクの追加

パッケージの機能を利用するためには、
gulpfile.js内でパッケージをタスクとして追加する必要がある。
以下は、gulp-sassパッケージを"sass"という名前のタスクとして追加した例。

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
    gulp.src('sass/**/*scss')
        .pipe(sass())
        .pipe(gulp.dest("./css")
});

タスクの書式はパッケージによって様々なので、よく調べること。

MiniMatchパターン

gulp.src()で指定するパスの書き方。
gulpfile.jsのあるディレクトリからの相対パスを指定する。

  • *はパスセパレータを含まない任意の文字列
  • **はパスセパレータを含む任意の文字列

他にもいろいろある。

タスクを実行する

$ gulp sass

gulpコマンドのあとにタスク名を入力して実行することで、
タスク単体を任意に実行することができる。
またタスク名を省略した場合は、"default"という名前で追加されたタスクの内容を実行する。

おまけ:既存のパッケージ設定を他のディレクトリに反映する

package.jsonを別のディレクトリにコピーしてnpm installすると、
元のディレクトリで使われたnpmパッケージがそのまま展開される。
妙なことをしていなければgulpfile.jsもコピーしてくればそのまま動く。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1