Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
41
Help us understand the problem. What is going on with this article?
@cognitom

gulp 3.7 リリース: CoffeeScriptネイティブに

More than 5 years have passed since last update.

今回のアップデートの目玉は、やはりCoffeeScriptなどのaltJSをデフォルトでサポートするようになった点です。その他、--tasks-simpleオプションが用意されたのは、gulpと連携したアプリを作ろうとしていた人には朗報です。(実際、経緯としてはgulp-appからのニーズで追加されました)

合わせて、gulpコマンドの自動補完が改善されています。今までのバージョンで自動補完を使っていない場合は、ぜひ。Bash, Zsh, Powershell対応です。

gulp

以下、リリース文を転載しておきます。

  • update vinyl-fs to remove BOM from UTF8 files
  • add --tasks-simple flag for plaintext task listings
  • updated autocomplete scripts to be simpler and use new --tasks-simple flag
  • added support for transpilers via liftoff 0.11 and interpret
    • just npm install your compiler (coffee-script for example) and it will work out of the box

altJSを使うには?

CoffeeScriptを使う場合、package.jsonのdevDependenciescoffee-scriptを追加します。

{
  <略>
  "devDependencies": {
    "coffee-script": "*",
  }
}

設定ファイルとして、gulpfile.js の代わりに、gulpfile.coffee を置きます。例としてはこんな感じでしょうか。ほとんど括弧なしで書けますね。

gulp         = require 'gulp'
autoprefixer = require 'gulp-autoprefixer'
minifyCss    = require 'gulp-minify-css'
rename       = require 'gulp-rename'

gulp.task 'css', ->
  gulp.src            './css/styles.css'
  .pipe autoprefixer  'last 2 versions'
  .pipe minifyCss     keepSpecialComments: 0
  .pipe rename        extname: '.min.css'
  .pipe gulp.dest     './css/'

CoffeeScript以外のaltJSでも、同様にdevDependenciesに追加して、gulpfileの拡張子を設定すれば、それだけでOKです。

利用可能なaltJS

gulp.jsは、liftoff経由でスクリプトをロードします。現状で対応しているのは、jsを含めて下記の6つです。

listoff

{
  '.co': 'coco',
  '.coffee': 'coffee-script/register',
  '.iced': 'iced-coffee-script/register',
  '.js': null,
  '.litcoffee': 'coffee-script/register',
  '.ls': 'livescript'
}

この定義は、liftoff内ではなくて、interpretを読みに行っています。別のaltJSを使いたい場合は、こちらにコミットすると良いかもしれません。

  • liftoff : Launch your command line tool with ease
  • interpret : A dictionary of file extensions and associated module loaders
41
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
cognitom
下北沢オープンソースCafeのマスターで、図書館サービス「リブライズ」のデザイン担当。Riot.jsのコア開発者。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
41
Help us understand the problem. What is going on with this article?