grunt-task-helperが良さそう
grunt-task-helperというGruntプラグインを使っている。ざっと言うとsrcとdestを比較してフィルターをかけた結果を他のタスクで使えるようになったりするもの。例えばビルトインの比較機能であるnewFileを使うと、更新されたファイルがあった場合にだけ走るタスクと似たようなものが簡単に作れる。 grunt-contrib-concatを使っているとして、そのタスク設定が以下のようになっているとする。 concat: { options: { seperator: ';' }, prettify: { src: [ 'scripts/prettify/prettify.js', 'scripts/prettify/lang-config.js', 'scripts/prettify/lang-css.js', 'scripts/prettify/lang-scss.js',
gulpのアプローチ
gulpのGetting Startedにもあるように、gulpを使うにはグローバルインストールとローカルインストールが必要になる。なんで同じものを2つインストールするのか、不思議に思ってソース読んで「へー」と思ったのでまとめてみる。 Gruntの場合 Gruntの場合はgrunt-cliをグローバルにインストールしてgruntはローカルにインストールする。grunt-cliはローカルにインストールしたgruntを呼び出すためだけのモジュールだ。タスクを走らすgruntと、そのgruntを実行するgrunt-cli、2つのモジュールは明確に役割が切り離されている。 Gruntがこうなってる理由は、異なるプロジェクトで使ってるgruntのバージョンが違うと、グローバルにインストールされてるgruntのバージョン次第で、そのタスク（Gruntfile）が動かせない可能性が出てくるから。 （参考
Takazudolog - Grunt v0.4.0 での変更点
Grunt がめでたく version 0.4.0 になりました。version 0.3.xからの変更点をざっくり。自分で昔書いたタスクを書きなおす上で必要だったことのみですけど。 箇条書きで書くとこんなかんじでした。 ドキュメントがめっちゃ親切になった Grunt本体はグローバルにインストールされなくなった grunt-cliのみをグローバルにインストールすればOK ビルトインのタスクは全てnpm moduleになった Grunt本家がビルトインで存在していたタスクをnpm moduleとして用意した コンフィグのファイルはgrunt.jsではなく、Gruntfile.js及びGruntfile.coffeeになった コンフィグのファイル及びタスクはCoffeeScriptで書いても良くなった タスク内でイベントが使えるようになった テンプレート機能が改善 registerHelperが
minimatch（node.js で path match するライブラリ）のチートシートを作った - 詩と創作・思索のひろば
minimatch っていうのは Grunt や gulp.js その他あちこちで（npm もらしい）使われてるグロブマッチライブラリです。最近よく gulp を使ってるんだけど、毎回 gulp.src() の書き方で迷ってしまう。調べた結果 minimatch に行き当たったんだけど各種 glob 実装のドキュメント読んで把握しろ、という感じでよく分からなかったので早見表を作った次第です。 https://github.com/motemen/minimatch-cheat-sheet 確認用にテストを書いていて、そのテストケースからドキュメントを生成してるので間違いはないはずです。説明が間違ってる、この例も乗せた方が見やすいだろ、とかあればプルリクください。 折角なので日本語版を書いておきますね。 基本 * はパスセパレータを含まない任意の文字列にマッチ ** はパスセパレータを含む任
Autopolyfiller - Web Design Weekly
Auto Generating Polyfills for JavaScript. I’m sure we can safely say at the time of this writing and going forward that we as developers no longer care to maintain let alone write prefixes and polyfills in our code. The task is time consuming, messy and hard to maintain over time. Currently we have tools like autoprefixer and -prefix-free that let us write CSS properties without the hassle of reme
How we make RWD sites load fast as heck | Filament Group, Inc., Boston, MA
How we make RWD sites load fast as heck Posted by Scott Jehl 07/30/2014 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. There has been a lot of discussion about optimizing responsive layouts for performance lately, and I thin
Browsersync - Time-saving synchronised browser testing
Time-saving synchronised browser testing. It’s wicked-fast and totally free. npm install -g browser-sync Get Started Your indispensable test assistant. With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of s
Grunt PageSpeed with ngrok for local testing | James Cryer
12 June 2014 Since releasing the original version of grunt-pagespeed a common question / issue that has been raise is the lack of support for running the Grunt task against local development environments. Yesterday Paul Kinlan tweeted a solution to using secure tunnels to local development environments. As outlined in Paul’s tweet a tool to solve this problem is ngrok. Ngrok allows you to securely
ページ表示速度の問題チェックをしてくれるgrunt-pagespeedについて紹介するよ - Qiita
Gruntfile.js grunt-pagespeed タスクをロードするように追記し、pegespeedタスクを定義します。 ここではPageSpeedのデスクトップ版チェック、モバイル版チェックを定義しています。 module.exports = function(grunt) { grunt.initConfig({ pagespeed: { desktop: { options: { paths: ['/', '/bijin-zoroe/', '/bijin/1134'], locale: 'ja_JP', strategy: 'desktop', threshold: 70 } }, mobile: { options: { locale: 'ja_JP', strategy: 'mobile', threshold: 65 } }, options: { key: 'API_
Gruntタスクで環境変数を定義する(grunt-env) - テノニッキ (@hideack 's diary)
Node.jsで開発しているプロジェクトでGruntを利用しているときに、タスクによって環境変数を定義したい場合、grunt-envを利用すると便利ですよ。という話。 npmでgrunt-envをインストール。 $ npm install grunt-env --save 次にGruntfile.jsを編集します。以下の様な具合。 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-env'); // grunt-env追加 grunt.initConfig({ env: { dev: { NODE_ENV : 'development' }, production: { NODE_ENV : 'production' } } }); 上の様に定義した上で、例えば既に、serverというタスクにコンパイル及びNode.j
Syntactically Awesome Style Sheets Automated Service
SASSAS!Better known as 'Syntactically Awesome Style Sheets Automated Service' is a tool designed to help developers work with SASS & SCSS. Direct ConversionPOST an SCSS file to /api/convert and you will be returned the compiled CSS in the response body.POST /api/convert HTTP/1.1 Host: http://sassas.uk Content-Type: application/x-www-form-urlencoded ------Boundary Content-Disposition: form-data; na
Getting Started with Browserify — SitePoint
JavaScript implementations have been getting more and more complex as the beautiful beast we call the web evolves each year. Many of us now work with JavaScript modules – independently functioning components that come together to work as a cohesive whole, yet can happily have any component replaced without causing armageddon. Many of us have been using the AMD module pattern and RequireJS to accom
Creating and maintaining your own Bower package
A package manager for the web. Bower is a nice utility for managing your projects client-side dependencies. If you're a web developer, you've probably at least heard of it, and maybe you've even used it to consume and manage the packages you use in your web app. You might have also thought to yourself, I wonder what I would need to do to share <that awesome little client library of yours> with the
Automating Web Performance Measurement | Blog | Chrome for Developers
Web performance can have a huge impact on your entire user experience. If you’ve been looking at improving your own site’s perf lately, you’ve probably heard of PageSpeed Insights - a tool that analyzes pages and offers advice on how to make them faster based on best practices for mobile and desktop web performance. PageSpeed’s scores are based on a number of factors, including how well your scrip
Performance Budgeting with Grunt - Web Performance Consulting | TimKadlec.com
It seems like the idea of performance budgeting has been gaining quite a bit of traction over the past year. This is awesome! The best way to improve web performance is to prioritize it from the get-go, and that’s exactly what a performance budget helps you do. But having the budget set in a document somewhere doesn’t accomplish much. It needs to be enforced to really matter. I’m a big fan of Grun
Gruntでjadeコンパイルするときのあれこれ - シアトルコンサルティング サービス開発ブログ
こんにちは iijmyaです。 Gruntのプラグイン'grunt-contrib-jade'でjadeファイルをコンパイルする際に、 jadeファイルで使いたい値をGruntfileから渡したり、あるディレクトリ以外のjadeファイルをコンパイルしたかったりしたので、自分なりにGruntfile.coffeeに書いてみました。 1．jadeファイルで使いたいオブジェクトをGruntfileから渡す 外部から変数を定義するときは dataオプションを使用します。 data: function(dest, src) return { from: src, to: dest } この関数は宛先(dest)と送信元(src)を引数として持ち、データオブジェクトを返します。 例えばjadeファイル内で、ページによって異なるクラス名を付けたいシチュエーションがありました。 変数bodyに、コンパイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Finnish Online Casino Reviews – No Deposit Casinos – Know what other gamblers have to say about Finland's top online casinos and gambling spots to discover the most-happening places to win the jackpot.
GitHub - addyosmani/critical-path-css-tools: Tools to prioritize above-the-fold (critical-path) CSS
GitHub - addyosmani/es6-tools: An aggregation of tooling for using ES6 today
Getting Started with Sass, Bourbon, and Neat with Yeoman
