gulp.jsとは #gulp.js #javascript version 5

2016/03/17 11:50 by hiro_y hiro_y
  :追加された部分   :削除された部分
(差分が大きい場合、文字単位では表示しません)
gulp.jsとは #gulp.js #javascript
# gulp.jsとは

- JavaScriptで書くタスクランナー
  - Node.jsで動きます
- 定義されたタスクを実行できる

# 使いどころ

- Sassのコンパイル
- autoprefixerを使ってベンダープリフィックスを付ける
- JavaScriptのlintとかminify
  - ES 2015をbabel
- live reload
- アプリケーションサーバーの起動管理

# 導入の仕方

Mac前提で

- `brew install node`
  - nodebrewとか使いたい場合はそちらで
  - 何もしないと5.x系が入ると思いますが、安定版(LTS)は4.x系
- `npm install gulp --global`

# npmとは

- Node.jsのパッケージマネージャー
  - RubyでいうところのGem(Gemfile)
  - PHPでいうところのComposer(composer.lock)
- Node.jsの場合`package.json`というファイルを使います
  - `npm init`すると雛形が作成できます
  - 決められたバージョンをインストールできるようにする仕組み

## 仕組み

- `npm install`すると`node_modules`というディレクトリーができてそこにパッケージがインストールされます
- `npm install --saveす`るとインストールされた上に`package.json`にそのモジュール名とインストールしたバージョンが記録されます。`dependencies`として。
- `npm install --save-dev`すると同様ですが`devDependencies`として記録されます

# 例

```js:gulpfile.js
'use strict';

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      bourbon = require('node-bourbon').includePaths,
      autoprefixer = require('gulp-autoprefixer'),
      uglify = require('gulp-uglify'),
      nodemon = require('gulp-nodemon');

const paths = {
  sass: [
    'assets/sass/**/*.scss',
    'assets/sass/**/*.sass'
  ],
  js: [
    'assets/js/**/*.js'
  ],
  vendorcss: [
    'node_modules/normalize.css/normalize.css'
  ],
  vendorjs: [
    'node_modules/jquery/dist/jquery.min.js'
  ]
};

gulp.task('sass', function() {
  gulp.src(paths.sass)
    .pipe(sass({
      outputStyle: 'compressed',
      includePaths: ['sass'].concat(bourbon)
    }))
    .on('error', function(err) {
      return console.log(err.stack);
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false,
      remove: false
    }))
    .pipe(gulp.dest('public/css'));
});

gulp.task('js', () => {
  gulp.src(paths.js)
    .pipe(uglify())
    .pipe(gulp.dest('public/js'));
});

gulp.task('watch', ['sass', 'js'], () => {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.js, ['js']);
});

gulp.task('vendor', () => {
  gulp.src(paths.vendorcss, {base: 'node_modules'})
    .pipe(gulp.dest('public/css/vendor'));
  gulp.src(paths.vendorjs, {base: 'node_modules'})
    .pipe(gulp.dest('public/js/vendor'));
});

gulp.task('nodemon', () => {
  nodemon({
    script: 'app.js',
    ext: 'js jade',
    ignore: ['assets/*']
  }).on('restart', []);
});

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

- [Bourbon - A Lightweight Sass Tool Set](http://bourbon.io/)
- [postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use](https://github.com/postcss/autoprefixer)

# 余談: Bowerとは

- [Bower](http://bower.io/)
- クライアントコーディングとかで必要なパッケージを管理できる
- Node.jsでできている
- 導入は`npm install bower --save-dev`
- jQueryとかJSライブラリ、あとCSSのとか入れられる
- …でも正直npmでインストールできるものが多い
	- ので、bower使わずにnpmで済ませています
	- bowerが便利な場合も(まだ)あるのでそこは場合による

# 余談: Node.jsのバージョン

- 4.x系と5.x系の違い
- LTSかどうか
- 安定しているのが4.x系、新しい機能使いたいなら5.x系
- [Cordova](https://cordova.apache.org/)とか[Ionic](http://ionicframework.com/)とかたまに5.x系で動かなくなる…      

gulp.jsとは

  • JavaScriptで書くタスクランナー
    • Node.jsで動きます
  • 定義されたタスクを実行できる

使いどころ

  • Sassのコンパイル
  • autoprefixerを使ってベンダープリフィックスを付ける
  • JavaScriptのlintとかminify
    • ES 2015をbabel
  • live reload
  • アプリケーションサーバーの起動管理

導入の仕方

Mac前提で

  • brew install node
    • nodebrewとか使いたい場合はそちらで
    • 何もしないと5.x系が入ると思いますが、安定版(LTS)は4.x系
  • npm install gulp --global

npmとは

  • Node.jsのパッケージマネージャー
    • RubyでいうところのGem(Gemfile)
    • PHPでいうところのComposer(composer.lock)
  • Node.jsの場合package.jsonというファイルを使います
    • npm initすると雛形が作成できます
    • 決められたバージョンをインストールできるようにする仕組み

仕組み

  • npm installするとnode_modulesというディレクトリーができてそこにパッケージがインストールされます
  • npm install --saveするとインストールされた上にpackage.jsonにそのモジュール名とインストールしたバージョンが記録されます。dependenciesとして。
  • npm install --save-devすると同様ですがdevDependenciesとして記録されます

'use strict';

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      bourbon = require('node-bourbon').includePaths,
      autoprefixer = require('gulp-autoprefixer'),
      uglify = require('gulp-uglify'),
      nodemon = require('gulp-nodemon');

const paths = {
  sass: [
    'assets/sass/**/*.scss',
    'assets/sass/**/*.sass'
  ],
  js: [
    'assets/js/**/*.js'
  ],
  vendorcss: [
    'node_modules/normalize.css/normalize.css'
  ],
  vendorjs: [
    'node_modules/jquery/dist/jquery.min.js'
  ]
};

gulp.task('sass', function() {
  gulp.src(paths.sass)
    .pipe(sass({
      outputStyle: 'compressed',
      includePaths: ['sass'].concat(bourbon)
    }))
    .on('error', function(err) {
      return console.log(err.stack);
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false,
      remove: false
    }))
    .pipe(gulp.dest('public/css'));
});

gulp.task('js', () => {
  gulp.src(paths.js)
    .pipe(uglify())
    .pipe(gulp.dest('public/js'));
});

gulp.task('watch', ['sass', 'js'], () => {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.js, ['js']);
});

gulp.task('vendor', () => {
  gulp.src(paths.vendorcss, {base: 'node_modules'})
    .pipe(gulp.dest('public/css/vendor'));
  gulp.src(paths.vendorjs, {base: 'node_modules'})
    .pipe(gulp.dest('public/js/vendor'));
});

gulp.task('nodemon', () => {
  nodemon({
    script: 'app.js',
    ext: 'js jade',
    ignore: ['assets/*']
  }).on('restart', []);
});

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

余談: Bowerとは

  • Bower
  • クライアントコーディングとかで必要なパッケージを管理できる
  • Node.jsでできている
  • 導入はnpm install bower --save-dev
  • jQueryとかJSライブラリ、あとCSSのとか入れられる
  • …でも正直npmでインストールできるものが多い
    • ので、bower使わずにnpmで済ませています
    • bowerが便利な場合も(まだ)あるのでそこは場合による

余談: Node.jsのバージョン

  • 4.x系と5.x系の違い
  • LTSかどうか
  • 安定しているのが4.x系、新しい機能使いたいなら5.x系
  • CordovaとかIonicとかたまに5.x系で動かなくなる…