Embed

gulp入門

gulpとは？
設定ファイルの比較
gulpの導入
GulpでSassのコンパイルして

Web自動リロードしてみる。
おまけ

gulpとは？

Node.jsベース
似たツールにGrunt ->

　公式サイト:http://gulpjs.com/

Gruntが抱えている問題を解決する手段(読みにくい、遅い)
シンプルに記述できるので、可読性も高い(記法Node.js)
Node.jsのStream APIを使って並列実行されるため、素早く動作する
開始2013/6月とまだ新しい

フロントエンド開発のタスクランナー&ビルドツール

SassやaltJSなどのコンパイルや結合・圧縮などを自動化できるツール

grunt.initConfig({
	sass: {
		dist: {
			files: [{
				cwd: 'sass',
				src: 'bootstrap.scss',
				dest: '.tmp/',
				expand: true,
				ext: '.css'
			}]
		}
	},
	autoprefixer: {
		options: ['last 1 version'],
		dist: {
			files: [{
				expand: true,
				cwd: '.tmp/',
				src: 'bootstrap.css',
				dest: 'dist/css'
			}]
		}
	},
	watch: {
		styles: {
			files: ['sass/{,*/}*.scss'],
			tasks: ['sass:dist', 'autoprefixer:dist']
		}
	}
});
grunt.registerTask('default', ['sass', 'watch']);

gulp.task('sass', function () {
	gulp.src('sass/bootstrap.scss')
		.pipe(sass())
		.pipe(autoprefixer('last 1 version'))
		.pipe(gulp.dest('dist/css'));
});
gulp.task('default', ['sass'], function() {
	gulp.watch('sass/**/*.scss', ['sass']);
});

gulpfile.js

Gruntfile.js

gulpはNode.jsぽい

Gruntはjsonぽい

gulpの導入

% ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)" 
% brew doctor
% brew -v
Homebrew 0.9.5

1. homebrewのインストール

-Mac編①-

2. nodeのインストール

3. gulpのインストール

% brew install node
% node -v
v0.10.33
% npm -v
2.5.1

% npm install -g gulp
% gulp -v
[11:49:27] CLI version 3.8.11

※グローバルインストールする

gulpの導入

% npm init

% vim package.json
{
  "name": "Practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://garbucket@bitbucket.org/garbucket/gulp_lession.git"
  },
  "author": "",
  "license": "ISC"
}

4. パッケージ管理(package.json)ファイルの作成

-Mac編②-

※ name:'gulp'していた場合、npm install gulpを実行した際にエラーになるので注意しましょう！

npm WARN install Refusing to install gulp as a dependency of itself

gulpの導入

% npm install gulp --save-dev
% cd node_modules
% ls 
./         ../        .bin/      gulp/

% vim package.json
 "devDependencies": {
     "gulp": "^3.8.11"
  }

5. gulpモジュールのインストール

-Mac③編-

6. タスク定義ファイル(gulpfile.js)の作成

※package.jsonと同階層に作成

var gulp = require('gulp');

// 引数なしでgulpと実行した際に呼ばれるタスク
gulp.task('default', function() {
        console.log("Hello gulp");
});

7.タスク実行

% gulp
[10:59:09] Using gulpfile ~/git/Sass/Practice/gulpfile.js
[10:59:09] Starting 'default'...
Hello gulp
[10:59:09] Finished 'default' after 73 μs

GulpでSassのコンパイルして

Web自動リロードしてみる。

1. SassをCSSにコンパイル

2. ファイル変更の監視をする

3. Webの自動リロード

1. SassをCSSにコンパイル

gulp-compassのインストール

% npm install gulp-compass --save-dev

var gulp = require('gulp');
var compass = require('gulp-compass');

//Sassコンパイル
gulp.task('compass', function () { //gulp.task('タスク名', function(...
    gulp.src('public/sass/*.scss') //呼び出しファイルを指定
        .pipe(compass({  //処理を実行
            config_file: 'public/config.rb',
            sass: 'public/sass/',
            css: 'public/css/'
        }));
});

//デフォルトタスク
gulp.task('default', ['compass']);

タスクを追加

2. ファイル変更の監視をする

//監視
gulp.task('watch', function () {
    gulp.watch(["public/sass/*.scss"], ["compass"]);
});


//デフォルトタスク
gulp.task('default', ['watch','compass']);

3. Webの自動リロード

簡易Webサーバーを立てて自動リロードする

% npm install gulp-webserver --save-dev

var webserver = require('gulp-webserver');

//簡易Webサーバー
gulp.task('webserver', function () {
    gulp.src('./') //Webサーバーで表示するサイトのルートディレクトリを指定
        .pipe(webserver({
            livereload: true, //ライブリロードを有効にする
            port: 3000
        }));
});

//デフォルトタスク
gulp.task('default', ['webserver','watch','compass']);

実践

おまけ①

・グローバルインストールとローカルインストールとは？

npm

-g あり npm install -g gulp

コマンドラインから実行する場合

-g なし npm install gulp

require()する場合

おまけ②

--save , --save-dev の違い

npm install

  "devDependencies": {
    "gulp": "^3.8.11"
  }

 "dependencies": {
    "gulp": "^3.8.11"
  }

・--saveの場合

・--save-devの場合

% npm install

一括インストール可能

% npm install --production

dependenciesのみ一括インストール