My First gulp hanson

1.md

Hello gulp

About gulp

gulpはweb開発をする時に発生するフロントエンドなどの諸問題をタスクで支援するツールです。 (フロントエンドだけに限らない)

今回は以下のタスクを行うgulpファイルを作成してみます

• Serverの起動
• ファイルが変更されるたびにブラウザをリロード
• Sassのコンパイル
• css,javascript,imagesの最適化

gulpを選ぶ理由

同じような機能を持つツールにGruntやBroccoliなどがあります。これは一般的にビルドツールとよばれている。

Gruntはタスクの設定を定義し、実行していくため設定わかりやすい。 gulpは一連の処理を設定し、並列実行することで高速に行える。という違いがあります。

Install

gulpを使うにはnode.jsが必要です。 まず、node.jsとそのバージョンを管理ツールをインストールします。

まだnode.jsをインストールしてない場合は以下を行うことで nodeのバージョン管理ツールndenvと最新のnode.jsがインストールできます。

https://gist.github.com/kazu69/7687f08c875694ee01c9

続いてgulpをインストール

-g をつけることでglobalにインストール パスが通りますので、どこからでもコマンド実行できます。

npm i -g gulp

Create Project

テキトな名前でプリジェクトディレクトリを作成します。

mkdir project && cd project

プロジェクトの情報を保持するファイル(package.json)を作成する

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (project)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/project/package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes)

以下のファイルが作成

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

プロジェクトにgulpをインストール

npm i -D gulp

-D をつけることで開発に必要なパッケージとしてインストール。 node_modules ディレクトリにgulpがインストールされる。

globalとlプロジェクトに入れるのは、globalのgulpからプロジェクトのgulpを実行する必要があるため。

Make Projects Structure

以下のようなディレクトリを作成

.
├── app
│   ├── css,
│   ├── index.html
│   └── scss
├── gulpfile.js
├── node_modules
│   └── gulp
└── package.json

Create gulp Task

gulpfile.jsを開いてタスクを追加していきます。

helloというタスクを作成

// gulpを読込む
var gulp = require('gulp');

gulp.task('hello', function() {
  console.log('Hello World');
});

gulp -T
[00:09:07] Using gulpfile ~/project/gulpfile.js
[00:09:07] Tasks for ~/project/gulpfile.js
[00:09:07] └── hello

gulp hello
[00:09:45] Using gulpfile ~/project/gulpfile.js
[00:09:45] Starting 'hello'...
Hello World
[00:09:45] Finished 'hello' after 118 μs

Use Preprocessor

Sassを使う

npm i -D gulp-sass

適当なSassファイルを作成

touch app/scss/style.scss

$red: #f00;
$blue: #00f;
$green: #0f0;

p {
  font-color: $red;
}

body {
  background-color: $green;
}

gulpfile.jsにタスクを追加

var sass = require('gulp-sass');
gulp.task('sass', function(){
  return gulp.src('app/scss/style.scss')
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('app/css'))
});

style.cssが作成されている

ls app/css
style.css

Watch File Change

ファイルが編集されたら、何かしらの処理を行う。 今回はファイルが編集されたらブラウザを自動でリロードしてみます。

npm i -D browser-sync

require browser-sync して、タスクを追加

var browserSync = require('browser-sync');
gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
  })
});

sass タスクを修正して、sassファイル編集時にブラウザをリロードするようにする。

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

ファイルを監視するタスクを追加

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']);
  gulp.watch('app/*.html', browserSync.reload);
});

タスクを実行して、sassファイルを編集する。

gulp watch
[21:46:03] Using gulpfile /project/gulpfile.js
[21:46:03] Starting 'browserSync'...
[21:46:03] Finished 'browserSync' after 56 ms
[21:46:03] Starting 'sass'...
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.6:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.6:3001
 ------------------------------------
[BS] Serving files from: app
[BS] 1 file changed (style.css)
[21:46:03] Finished 'sass' after 118 ms
[21:46:03] Starting 'watch'...
[21:46:03] Finished 'watch' after 18 ms
[21:49:44] Starting 'sass'...
[BS] 1 file changed (style.css)
[21:49:44] Finished 'sass' after 12 ms
[21:49:52] Starting 'sass'...
[BS] 1 file changed (style.css)
[21:49:53] Finished 'sass' after 7 ms

Set default

デフォルトタスクを作成

gulp.task('default', ['watch']);

デフォルトタスクはタスク名なしで実行される

gulp

という具合に、pluginを追加して、タスクを作成していくことで 開発を効率的に行えるような環境を作ることができる。

gulp.js

// gulpを読込む
var gulp = require('gulp');

var sass = require('gulp-sass');
var browserSync = require('browser-sync');

gulp.task('hello', function() {
  console.log('Hello World');
});

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
  })
});

// gulp.task('sass', function(){
//   return gulp.src('app/scss/**/*.scss')
//     .pipe(sass()) // Using gulp-sass
//     .pipe(gulp.dest('app/css'))
// });

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']);
  gulp.watch('app/*.html', browserSync.reload);
});

gulp.task('default', ['watch']);