gulp4.0 migration guide - Qiita
背景 ひと昔前までフロント側build toolと言えば grunt が主流でしたが、今は gulp が主流になりました。 gulpは現在のところ3.9が最新ですが、水面下では4.0が準備中です。 4.0は久しぶりの major version release だけあって、結構な breaking changes が含まれる予定です。 4.0がいつリリースされるかは分かりませんが、 4.0 branch は用意されていて、そのほとんどの機能はもう動かすことができます。 本エントリではchangelogを見ながら、その機能を実際に試していって、どういったものか説明していこうと思います。 今回書いたコードはgithubにあげたので、もし試したい方がいればどうぞ。 資料 changelog API document バージョン $ ./node_modules/gulp/node_modules
RailsのAsset PipelineとPrecompileをNode.jsのみで処理できるgulp-sprocketsを作った - yo_waka's blog
RailsのAsset PipelineとPrecompileをNode.jsのみで処理できるgulp-sprocketsを作った 仕事ではRailsアプリを書いていて、JSやCSSなどのフロントエンドはRailsのAsset Pipelineの仕組みに則ってビルドしてる。 普通にRailsアプリ作ってると普段Sprocketsについて特に意識しないと思う。 Sprocketsはそこが凄くて、あまり考えなくてもドキュメント通りにやってれば、必要なAssetを結合できて、リリース時は変更がなければブラウザキャッシュから、変更があれば 新しく読み込まれるみたいなことをやってくれる。 なんだけど、もうそろそろ新しい機能はES2015で書きたいよねという人が増えてきた。 とはいえSprocketsは独自のディレクティブ以外は使えなくて、SprocketsWayから外れると途端に脆い。 ES2015
gulp v4.0を眺めてみた
gulpfileをES6に置き換える必要があり、何気にgulpの情報追っていると、 そろそろv4.0がリリースされそうなのでざっくりと眺めてみた。 gulpfileをES6で書くまず、本来の目的だったこの件、v3.9ですでに対応されていた。 以下の条件であれば利用可能のようだった。 gulp v3.9以上 gulpfile.jsをgulpfile.babel.jsとする babel-core をインストールすること 内部的にはbabelで変換しているようだ。 続いて、v4.0のCAHNGELOGも眺めてみた。 gulp4.0をインストール cliの変更点--tasks-json と --verify オプションが追加されてる。 –task-json はタスクをjson形式で出力する。 –verify はpluginsがpackage.jsonを参照しているかチェックする。 APIの変更点大
gulp-typescript で --target es6 から babel に通しつつ Incremental Buildする - Qiita
gulp-typescript で --target es6 から babel に通しつつ Incremental BuildするTypeScriptgulp ivogabe/gulp-typescript 元々typescriptなんてtscを生で叩けばいいじゃん派だったのだが、--target es6 で吐いたのをさらにbabelに通す必要があって、一旦書きだしたものをさらにbabelを通そうとすると、tmpなディレクトリが必要になるし、ファイルIOに負荷がかかるので、gulpのストリームの中で変換したかった。 やりたいこと node / electron で走らせたかったので browserify せずに src -> lib に書き出す。lib は es5 仕様。 ブラウザ用に書き出すときは必要に応じてbrowserifyする。debug中はElectronで走らせることでbrow
gulp.srcのglobからtsconfig.jsonのfilesを更新するプラグインを作った - Qiita
[追記] Gulpプラグインで受け取れるファイルストリームが順不同で、実行するたびにfilesの順序が変わる可能性がある。 ので、atom-typescriptと同じようにfilesGlobを展開するだけのCLIを作ったのでこっちを使って欲しい。 laco0416/tsconfig-cli Globの展開に使ってるのはatom-typescriptの内部でも使われてるTypeStrong/tsconfigなので、割と信用していいはず。少なくともnpmにある他のtsconfig展開系CLIはどれも独自にglob展開しているので使いたくなかった。 tsconfigに設定を集める、タスクランナーに設定を持たないべきという思想のメモという意味でこの記事は残す @laco0416です。gulp.srcのglobパターンからtsconfig.jsonのfilesを更新するプラグインを作りました。 gu
gulpfileをTypeScriptで書いて安心を得よう - Qiita
Gruntと比較するとgulpのgulpfile（設定ファイル）はコードの記述が多くを占めるので、TypeScriptで記述したくなります。幸い、gulpはinterpretというモジュールでgulpfileを読み込むので、altJSで記述するのは比較的簡単にできます。 gulpfileをTypeScriptで記述するためには、typescript-requireというモジュールをinstallしておく必要があります。
なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog
http://d.hatena.ne.jp/m-hiyama/20150511/1431306678 の件 最初に 僕もgulpが今後生き残るかというと、かなり懐疑的です。開発パラダイムに合わせて変わっていくで、来年の段階で自分はgulp使えないなといっている可能性は十二分にあります。そのタイミングの一つはES6 import がHTTP2で並列ロードのオーバーヘッド無しで解決されるようになるタイミングでしょう。 根本的な問題として、Web周りは標準化の関係で動きが遅いです。最新の仕様ではままならず、ブラウザ間の実装がまちまちで、また開発上の要求が多様なのでプリプロセッサで解決する文化が根付きました。プリプロセッサがいらなくなるぐらい個々の標準が洗練されればプリプロセッサも不要になりますが、そのような未来は、今の動きをみるに、あと15年は来ないように思えます。 とはいえ、ただひとつ言えるの
gulp × TypeScript × Browserifyな開発環境構築 - Qiita
概要 ビルドツール ： gulp altJS ： TypeScript モジュール管理： Browserify 以下で説明していく開発環境のひな形はGitHubに置いてありますm(_ _)m https://github.com/massa142/typescript-devenv 前提 Node.jsインストール済み。 Node.jsのインストール方法に関しては、以下の記事が詳しいのでご参照ください。 node.jsのversionを管理するためにnodebrewを利用する - Qiita 参考にしたもの TypeScriptリファレンス Ver.1.0対応 gulpでbrowserifyを使う | 4uing Usage npm install gulp tsd gulp (tsc| browserify | watch| minify) ファイル構成 root ├── src
David Kudera
I'm someone who has never doubted that will become a programmer one day. I wrote my first function (random number generator for a lottery taken from a book) when I was eleven years old, but professionally I'm in this field for 10+ years. Even though I always knew that I would be a programmer, it was never an easy thing trying to stay on top and be the best developer I could be. Luckily that's what
gulp-tscとgulp-typescriptの利用方法の違いについて - Qiita
gulpでTypeScriptをコンパイルするプラグインはいくつか種類があるようですが、今のところ自分はgulp-tscとgulp-typescriptの2つを試しながら使っています。 両方使ってみると分かるのですが、利用方法にかなり違いがあるのでお好みに合わせて選ぶと良いのではと思っています。 今回はそんな2つのプラグインの利用方法の違いについて説明します。 と、その前に。 書いている途中で気づいたのですが、今現在のgulp-tscは最新のTypeScriptを利用すると上手く動作しない場合があるようです。 GitHubのIssuesでも報告されていてPull RequestsにPRがたまっているので、これらを参考にしながら自分で修正すれば直るかもしれませんがまだ試せていません。 自分の環境だと/// <reference path="...">の指定がコンパイラに正しく解釈されずにコン
Chrome extension向けTypeScript,gulp,power-assert,karma設定
Chrome extension向けTypeScript,gulp,power-assert,karma設定 ベース設定的なものができたので紹介。 gulp or grunt今回はassertionにPowerAssertを使うため、変換時に中間ファイルを必要としないgulpを選択。 gulp-tsc or gulp-typescriptgulp-tscはだいぶ更新されてないし取り込まれてないPRもあるけど、gulp-typescriptはしばらく触ってみてファイルを結合する方法がわからなかったので断念した。 gulp-tscはコンパイル時に「Compiling TypeScript files using tsc version null」って出るのさえ気にしなければそれ以外はそんなに問題ない。 gulp-typescriptはjsとd.tsと.mapをそれぞれ別々に処理する方法を提供し
Google Web Starter Kitのgulpfileを翻訳してみた - Qiita
Google Web Starter Kit GitHub - google/web-starter-kit javascriptを覚えるために静的開発環境を整えようとして、タスクランナーフレームワークgulpを導入。 ついでにcssフレームワークは話題のGoogle Web Starter Kitを使ってみる。 Google Web Starter Kitの純正gulpfileを読んで注釈をつけてみたので、投稿。 use scrict // Include Gulp & Tools We'll Use var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var del = require('del'); var runSequence = require('run-sequence'); var brow
gulpでbrowserify使ってcoffee-scriptの監視とコンパイル - Qiita
まずnpmから必要な物をいれる。gulpで browserify/coffeeify を使ってビルドする場合、coffee-script も必要になる。 $ mkdir proj-path; cd proj-path $ npm init $ npm install --save-dev gulp gulp-browserify gulp-watch gulp-plumber gulp-rename coffeeify coffee-script gulp-rename リネームタスク gulp-watch 監視タスク gilp-plumber タスクの実行に失敗してもgulpを終了させないパイプ(watchでビルド失敗時に終了させない) gulp-browserify browserify gulpfile.coffee gulp = require 'gulp' browserify
TypeScriptのビルドにgruntじゃなくてgulpを使ってみるおじさんのメモ - DRYな備忘録
もくじ gruntだと npm install -g gulp gulpfile.js 実行してみる gulpfile.coffee TypeScriptのビルドをたのむ gruntだと gruntでこういうプロジェクトつくるワケ myproject ├── package.json ├── Gruntfile.coffee ├── build │ └── app.js └── src └── sample.ts package.json { "name": "my", "version": "0.0.1", "devDependencies": { "grunt": "*", "grunt-typescript": "*" } } Gruntfile.coffee module.exports = (grunt) -> grunt.initConfig pkg: grunt.file
Front End Ops Tooling
This talk covers build tooling, processes, and your development workflow. You’ll get a glimpse as to why you should be building, and why you should put together a build process from the get-go. Then we’ll move on to tooling. Here I’ll discuss some of the most popular JavaScript build tools, namely Grunt, Gulp, and npm. We’ll investigate how each one performs for certain tasks, and I’ll help you fo
gulpプラグインの基本構造（プラグイン開発者向け） - Qiita
プラグイン開発に関する詳細な情報はgulpの公式ドキュメントを参照のこと。また、開発したプラグインを公開する場合はgulp公式によるプラグイン開発ガイドラインは必読（MUST readと書かれている）。README規約も見ておくとよい。 （2014/2/9追記：プラグイン開発ガイドラインの日本語訳を公開） なお、gulpプラグインはnode.jsパッケージの一種なので、公開する際の手順やpackage.jsonの記述方法などはnode.jsのドキュメントを参照のこと。 gulpプラグインの実態（i.e. pipeに渡すもの）はnode.jsのStream.Transformのサブクラス Stream.Transformとは、ストリームからの入力を受け取り、加工し、ストリームに出力するもの Stream.Transformのサブクラスを直接作って実装しても良いが、gulpプラグインではStr
タスクランナーgulp入門
タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
gulp, TypeScript, Browserify で Chrome 拡張を書く - 詩と創作・思索のひろば
先日紹介した chrome-Flavoured-Favicon ですが、以下のような技術によって支えられています。 gulp ビルドツール。 TypeScript 型つき JS。 Browserify JS の依存関係の解決。 AngularJS HTML と JS を綺麗に結合させる。 最後の AngularJS は TypeScript との相性を試してみたかっただけのおまけです。結果は最高に気持ちよくなれました。 ディレクトリ構成 app/ 最終的に配布する拡張本体です。ほとんどのファイルはバージョン管理されておらず、gulp によって生成されます。 src/ TypeScript のソースなどが置いてあります。基本的にこの中だけを弄る。 DefinitelyTyped/ DefinitelyTyped（TypeScript の型定義ファイル）。Git の submodule で管理
Typescript を使う為の環境構築めも - Qiita
目的 業務で Coffeescript を書いています. 今回は, 別の AltJS である Typescript を知ること, その為に Typescript を使う準備をするのを目標にやったことのメモです. Typescript ではろーわーるど:D インストールしてはろーわーるどしてみる グローバルでなく作業ディレクトリのみにインストールします. $ npm i typescript $ ./node_modules/.bin/tsc -v Version 1.0.0.0 $ emacs hello.ts $ cat hello.ts console.info('hello:D'); $ ./node_modules/.bin/tsc hello.ts $ node hello.js hello:D
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/rymizuki@github/items/731c1a5828fca8737c2a