gulp なしの Web フロントエンド開発 - アカベコマイリ
Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって本記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus
HTML ファイルにビルド時の Git のコミットハッシュを入れるには - Qiita
index.html などの HTMLファイルにビルド時の Git のコミットハッシュ情報があれば、ブラウザJSアプリでのリリース後のトラブル対応時に便利かと思い、入れる方法を考えました。Window.app.gitCommitHash などでも同等かと思います。 git rev-parse HEAD でコミットハッシュが得られます。これを package.json の scripts 欄から環境変数 GIT_COMMIT_HASH に格納して、gulp タスクを実行して、gulp-replace で HTML ファイルの適当なところを置き換えました。 ▼ package.json "scripts": { "build": "GIT_COMMIT_HASH=$(git rev-parse HEAD) gulp hoge" }, var replace = require('gulp-re
なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog
http://d.hatena.ne.jp/m-hiyama/20150511/1431306678 の件 最初に 僕もgulpが今後生き残るかというと、かなり懐疑的です。開発パラダイムに合わせて変わっていくで、来年の段階で自分はgulp使えないなといっている可能性は十二分にあります。そのタイミングの一つはES6 import がHTTP2で並列ロードのオーバーヘッド無しで解決されるようになるタイミングでしょう。 根本的な問題として、Web周りは標準化の関係で動きが遅いです。最新の仕様ではままならず、ブラウザ間の実装がまちまちで、また開発上の要求が多様なのでプリプロセッサで解決する文化が根付きました。プリプロセッサがいらなくなるぐらい個々の標準が洗練されればプリプロセッサも不要になりますが、そのような未来は、今の動きをみるに、あと15年は来ないように思えます。 とはいえ、ただひとつ言えるの
gulp問題ひきずり：ウォッチがまたおバカ過ぎる - 檜山正幸のキマイラ飼育記 (はてなBlog)
「最近のビルドツールって何なの？」において、gulpは「腕力はあるが知性を持たない」、ゴレライ的というかゴライアス的というか…、そんなツールだと述べました。二、三、後から思ったことがあるので追加します。 内容： プロジェクトは肥大しちゃうことがある ウォッチをいちいち手で書くのかよー OMakeと比較してみる ウォッチはこうでなきゃ じゃ、OMakeがいいのか？ プロジェクトは肥大しちゃうことがある 「そもそも大した事はしないのでシンプルなツールgulpでも十分」ということなら、「そうですよね」と同意して話はオシマイです。でもね、gulpを使うプロジェクトが、ほんとに小さくて簡単なものなんでしょうか。 目の前に、10種のプログラミング言語が混じった2000ファイルのソースコード群がいきなり与えられたとき、「よしっ、gulpを使おう」とはならないと思うのですが、小さなプロジェクトが（良くも悪
React.js + Webpack + ContainerJSでTODOリストを作ってみた - うなの日記
React.js + Webpack + ContainerJS でTODOリストを作ってみたので、手順をまとめます。 以前書いた、Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル - うなの日記の改訂版。 最近流行ってるライブラリのお試しも兼ねて、いろいろ組み合わせて使ってみようという試みです。 ソース全体はこちらで公開しているので、あわせて参照ください。 ポイント モジュールローダーを require.js → Webpack に ソースはクラス単位で分割管理して、Webpackで1ファイルにまとめてリリースします。 WebpackだとAMDもCommonJSも両方扱えるので、npmのライブラリが使いやすくなるのは大きいかな。 あと、Loaderも便利ですね。 Viewモジュールを Knockout.js → React.js に 流行って
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
AST - the only true tool for building JavaScript
Have you ever thought, “I wish it was easier to change JavaScript code programmatically?” Maybe you wanted to write or edit a configuration block in source code. Perhaps you wanted to generate customized algorithmic code. For many, this kind of thing seems inaccessible. The tools exist, though. In this talk, Stephen Vance will look at how he has used recast and esprima to edit and rewrite JavaScri
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
Environment-specific Builds With Grunt, Gulp or Broccoli
Environment-specific Builds With Grunt, Gulp or Broccoli March 3, 2014 [caption id="attachment_6536" align="aligncenter" width="640"] Image credit: http://www.flickr.com/photos/brianneudorff/9109932159/[/caption] The dev, staging and production versions of our projects can vastly vary, which is one reason we may need to change paths to resources (scripts/styles/templates), generated markup or othe
Getting started with gulp — Mark Goodyear — Front-end developer and designer
Updated Jan 28th, 2014 to reflect the advancement of gulp Updated Apr 21st, 2014 to utilise updated `gulp-livereload` Updated Aug 11th, 2014 Using `del` instead of `gulp-clean`, updated `gulp-livereload` Updated May 20th, 2015 Update `gulp-ruby-sass` syntax Updated Nov 2nd, 2015 Update `del` syntax Updated Jan 12th, 2016 `gulp-minify-css` depreciated. Use `gulp-cssnano` Step aside Grunt, there's a
Build Wars: Gulp vs Grunt
A brief history of Grunt I realized that a task-based build tool with built-in, commonly used tasks was the approach that would work best for me Ben Alman March 2012 Single, global Grunt: $ npm install -g grunt Configuration over code grunt.initConfig({ lint: { src: 'src/<%= pkg.name %>.js' }, concat: { src: [ '<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>' ], dest: '<%= pkg.n
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulp.jsで広告タグの開発環境を整える | DACエンジニアブログ：アドテクゑびす界
gulp.js CheatSheet!
re-dzine.net situs togel online toto 2023 -
GitHub - substack/stream-handbook: how to write node programs with streams