gulp

Gulpまとめ(導入手順とgulpfile)

More than 1 year has passed since last update.


お手軽なGulp導入方法(Node.jsのインストーラーを使う場合)

https://ics.media/entry/3290/2


基礎


Gulp


  • Node.jsをベースとしたビルドシステムヘルパー。さまざまな作業を自動化できる。

  • プラグインを使い、一連のタスクを実行する


node.js


  • サーバーサイドJavaScript環境


nodebrew


npm


  • Node.jsをインストールするとnpmも一緒にインストールされる。

  • モジュールとそのバージョンや依存性を管理する


パスを通す(bash_profile)


  • bashシェル実行時に自動的に読まれるスクリプトが記述されている環境設定ファイル。

  • ユーザー単位でPATHを通すには、~/.bash_profile に記述。(「~/」 はユーザーのホームディレクトリ)

  • .bash_profileが無い場合は作る。


$ vim ~/.bash_profile


  • .bash_profile記述例

export PATH=$HOME/.nodebrew/current/bin:$PATH

http://qiita.com/soarflat/items/d5015bec37f8a8254380

http://qiita.com/hirokishirai/items/5a529c8395c4b336bf31


  • その他(.bash_profileはすでにあって、エディタを使わずに追記する例)


$ echo export PATH=$HOME/.nodebrew/current/bin:$PATH >> ~/.bash_profile


  • .bash_profileを編集した後は、sourceコマンドで設定を有効にする

$ source ~/.bash_profile



導入手順


nodebrewをインストール


$ curl -L git.io/nodebrew | perl - setup


パスを通す


export PATH=$HOME/.nodebrew/current/bin:$PATH


bash_profileの設定を有効にする(sorceコマンド)

$ source ~/.bash_profile


確認も含めてhelpを見る


$ nodebrew help

スクリーンショット 2016-09-18 18.56.30.png


node.jsをインストール

例)node.js v6.2.2をインストール


$ nodebrew install-binary v6.2.2


使用するnode.jsを指定


$ nodebrew use v6.2.2


確認


$ node -v

v6.2.2


$ npm -v

3.9.5


Gulpをグローバルにインストール


$ npm install -g gulp-cli


その他コマンド


  • インストールできるnode.jsのバージョンを検索


$ nodebrew ls-remote


例(デスクトップにmyprojetフォルダを作る)

1.png


  • プロジェクトのフォルダに移動


$ cd Desktop/sample-project


$ npm init

プロジェクト名や著作権の設定ダイアログが表示されるが、

設定が不要ならば全てYes(Enterキー)で進む

2.png

package.jsonができる


  • 必要なパッケージをインストールする

すでにパッケージの記載のあるpackage.jsonがある場合、


$ npm install

で、インストールされる。

初回の場合は、必要なパッケージをインストールする。


$ npm install -D gulp-sourcemaps


$ npm install gulp-sass --save-dev


$ npm install browser-sync --save-dev


$ npm install --save-dev gulp-autoprefixer


  • プロジェクトにGulpをインストールする


$ npm install gulp


  • インストールしたパーケージは、package.json内に記述される。


package.json



{
"name": "sample-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.16.0",
"gulp-autoprefixer": "^3.1.1",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0"
}
}

ディレクトリとgulpファイルのサンプル

4.png


gulpfile.js


var gulp = require('gulp');
var sass = require('gulp-sass');
var browser = require("browser-sync");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('default',['server'],function() {
gulp.watch('htdocs/sass/*.scss', ['sass']);
});
gulp.task('sass',function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('htdocs/css/'))
.pipe(browser.reload({stream:true}));
});

gulp.task("server", function() {
browser({
server: {
baseDir: "htdocs/"
}
});
});



index.html


<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<h1>タイトル</h1>
</body>
</html>


  • gulpを実行する


$ gulp


sassを編集・保存すると、cssとmapが生成される

5.png

スクリーンショット 2016-09-18 16.55.57.png