フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には
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の変更点大
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
gulp-iconfontでweb-font作成を自動化 前の記事（WebFont作成をGrunt.jsで自動化）でGruntによるweb-font自動化をやったのですが、今日マークアップ勉強会がベースキャンプ名古屋で開催されていなたのでgulpでもやってみました。 参考 以下２つを参考に動かしてみました。[Tsutomu Kawamura]さんのコードを少しいじって動かした感じです。 https://www.npmjs.org/package/gulp-iconfont https://github.com/cognitom/symbols-for-sketch インストール 以下が今回インストールしたパッケージになります。 gulp gulp-consolidate テンプレートエンジンで使用 gulp-iconfont シンボルフォント作成の本体 gulp-rename gulp-w
2014.12.16 こんにちわ。山王です。 最近話題になってるフロントエンドタスクランナーGulp.jsをインストールしたお話です。 以前Grunt.jsを使用した際はCompassのコンパイルが遅くて断念したんですが やはりナウでヤングでモダンなやり方でやりたいなぁと思いGulp.jsの噂を聞きつけインストールした次第です。 Gruntとの違い Gruntfile.jsに比べgulpfile.jsの方が書きやすい 実行速度が速い プラグインが少ない まだできて日が浅いので今後プラグインも増えてくるのではないでしょうか。 フロントエンドツールのトレンドの流れが早いので新しくもっといいツールが出る可能性もありますが。 目次 Node.jsインストール Gulp.jsインストール gulpfile.js作成 CompassでSASSのコンパイルをする CSSを圧縮する Javascriptを
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
詳しくは上記連載を見てもらえば分かりますが、GruntとはJavaScriptを使用してWeb開発に伴うさまざまな作業を自動化して効率良く行うためのビルドツールです。 このツールでは「タスク」と呼ばれる一連の処理を設定ファイルに記述していきます。Gruntの設定ファイル（Gruntfile.js）は、タスクに対してJSON形式でパラメーターを指定していくのですが、ここで少々問題があります。 シンプルなタスクであれば分かりやすいのですが、多くの拡張機能（プラグイン）を使用したり、タスクの制御を細かく行う必要が生じたたりした場合、Gruntfileの記述量が増えて冗長になり、タスク同士の関連やタスク実行結果も分かりにくくなってしまいます。 そんなGruntの問題点を解消することを目的として開発されたのが、今回紹介する「gulp.js」（以下、gulp）です。 gulpはGruntを継承しつつ、
最近のテスト環境 最近、ブログ書かないうちに、また、 自分のjs周りのテストやビルド環境が変わってきた。 具体的には、karmaとかgulpとかに変わった。 今日は、 その環境にしてどうだったか？とか、 設定ファイル(gulpfile)とか書いてみる。 去年と今年と 去年、勉強会等でyeomanとかgruntの話をしていて、このblogでもどこかに書いてた。 テストはmocha chaiが良いのかなーと思ってた。これもblog書いた。 所が、世の中どんどん変わっていく。 最近の環境 今はこんな感じ。 build tool gulp test jasmine2 sinon karma gulp vs Grunt gulpどうなんだろう？と思いながら色々試していくうちに、かなりしっくりきた。 stream baseで書き易いので、カスタマイズし易い。 gruntは、設定ファイルが何画面にも渡っ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
