[gulp] coffee script編

2016-08-17

gulp を使った coffee→js, min.js変換

gulpのスクリプト編の続きです。.coffeeを.js及び.min.jsに変換してみる。変換にはwebpackを使います。gulp自体の設定については下記の記事参照。

gulpの初期設定

フォルダ構成

以下はあるプロジェクトフォルダである。`

project_folder
├── 📁app
│   └── 📁js
├── 📁gulp
│   ├── config.coffee
│   └── 📁tasks
│       ├── coffee.coffee
│            :
├── gulpfile.coffee
├── 📁node_modules
├── package.json
└── 📁src
    └── 📁coffee

src/coffee フォルダ

ここに、変換元となる.coffeeファイルを置いておく。

app/js フォルダ

ここに変換した.js及び.min.jsを置く。

変換スクリプト

インストールするnpmモジュール

スクリプトの実行に必要なnpmモジュールをインストールしておく。

npm i fs gulp-webpack webpack gulp-uglify gulp-rename gulp-plumber coffee-loader -D`

coffee.coffee

gulp/tasks/coffee.coffee

 1gulp = require('gulp')
 2gulp_webpack = require('gulp-webpack')
 3webpack = require('webpack')
 4uglify = require('gulp-uglify')
 5rename = require('gulp-rename')
 6plumber = require('gulp-plumber')
 7config = require('../config')
 8
 9webpackConfig =
10  entry:
11    main: config.src + '/coffee/main.coffee'
12  output:
13    filename: '[name].js'
14  module:
15    loaders: [
16      {test: /\.coffee$/, loader: "coffee-loader"}
17    ]
18  resolve:
19    extensions: ['', '.js', '.coffee']
20  resolveLoader:
21    moduleDirectories: ['../../node_modules']
22  plugins:[
23    new webpack.ProvidePlugin({
24      jQuery: "jquery",
25      $: "jquery",
26      jquery: "jquery"
27      __: "underscore"
28      Backbone: "backbone"
29    })
30  ]
31  stats:
32    colors: true,
33    modules: true,
34    reasons: true,
35    errorDetails: true
36
37gulp.task 'coffee', ->
38  gulp.src(config.src)
39  .pipe(plumber({
40    errorHandler: (err) ->
41      console.log(err.messageFormatted);
42      @emit('end')
43  }))
44  .pipe(gulp_webpack(webpackConfig))
45  .pipe(gulp.dest(config.dest + '/js'))
46  .pipe(uglify())
47  .pipe(rename({
48    extname: '.min.js'
49  }))
50  .pipe(gulp.dest(config.dest + '/js'))

webpackConfig.entry:に変換したいcoffeescriptを記載していく。(coffeescript内でrequireされるファイルは記載しない。あくまでルートとなるファイルのみ書く)
webpackConfig.pluginsに書かれたモジュールは、coffeescript内でrequireを書く必要がない。(requireされたものとして扱われる)
.pipe(gulp_webpack(webpackConfig))の部分で.coffeeを.jsに変換している。

coffee実行

 1[hh:mm:ss] Requiring external module coffee-script/register
 2(node:46893) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
 3[hh:mm:ss] Using gulpfile project_folder/gulpfile.coffee
 4[hh:mm:ss] Starting 'coffee'...
 5[hh:mm:ss] Version: webpack 1.13.1
 6  Asset    Size  Chunks             Chunk Names
 7main.js  485 kB       0  [emitted]  main
 8   [0] ./src/coffee/main.coffee 234 bytes {0} [built]
 9:
10:
11[hh:mm:ss] Finished 'coffee' after #.## s