JSONを使ってSassとJavaScriptで設定値を共有する方法You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python hoge.js を minify したファイルを hoge.min.js として 出力する方法です. gulp-rename ってやつを使います. 拡張子を .js から .min.js に変換する gulp-rename というタスクを使います. 下記コマンドでインストールできます. $npm install --save-dev gulp-rename ついでに uglify も $npm install --save-dev gulp-uglify あとは gulpfile.js に下記のようなタス
軽量なマークアップ言語 Jade 入門 からの Gulp でコンパイルまで - Gulp で作る Web フロントエンド開発環境 #5 | PSYENCE:MEDIA
軽量なマークアップ言語 Jade 入門 からの Gulp でコンパイルまで - Gulp で作る Web フロントエンド開発環境 #5 wakamsha 2015.04.24 190 12187486 これまでずっと Rails での開発をしていたので軽量マークアップ言語に Slim を使っていましたが、Gulp 環境になっても同じような言語でマークアップしたいので Jade を導入してみたいと思います。 サンプルコードはこちらからどうぞ。 wakamsha/try_gulp Jade とは Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node and browsers. For bug reports, feature r
[意訳]私がGulpとGruntを手放した理由 - Qiita
このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。 （以下、訳） 私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。 例を挙げましょう 私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mochaなどを統合するのは本当にたいへんでした。なぜでしょうか？それは、プラグインによってはドキュメントが不十分だったり、APIの一部しか公開されていなかったためです。 これらを解決しようと思えばできました。しかしなんと それらのツールを直接使用すると不具合が
![[意訳]私がGulpとGruntを手放した理由 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/12154c3563ab1e4c476ab29976daf0bf560e5aaf/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU3JUE3JTgxJUUzJTgxJThDR3VscCVFMyU4MSVBOEdydW50JUUzJTgyJTkyJUU2JTg5JThCJUU2JTk0JUJFJUUzJTgxJTk3JUUzJTgxJTlGJUU3JTkwJTg2JUU3JTk0JUIxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1iZTQ0NGZiN2E3NjgxZTk3NDhhN2VjMjJjMDJlYjM5NQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0ZW5rZWkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU0NzA5OTdmMTUwMmIzOTNhZmZjMzdjZTY5MmZmOWNm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dedfd6cbca21222e04e388c5b3c8fab39)
フロントエンドのビルドツール、Grunt以外の選択肢 - tohashi's blog
フロントエンドのビルドツールというとGruntが デファクトスタンダードになっている感ありますが、 それ以外の選択肢って何があるかなという話です。 Gulp Gulpはストリーミング式のビルドツールです。 設定はgulpfileに記述します。 gulp = require 'gulp' coffee = require 'gulp-coffee' concat = require 'gulp-concat' uglify = require 'gulp-uglify' gulp.task 'compile', -> gulp.src('./src/*.coffee') .pipe(coffee()) .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('./dist/')) 記述方法はGruntと違い、このようにgulp.src(
gulp-hologramを導入メモ - Qiita
gulp-hologramを導入してみた gulpのtaskを書いていたので、スタイルガイドジェネレータを導入してみました。 たまたまCodeGridで「hologram（ホログラム）」というスタイルガイドジェネレータを紹介されていたので導入してみました。 Hologram — Style Documentation Build System hologramは、Rubyで書かれたスタイルガイドジェネレータです。 CodeGridの記事でも書かれていましたが、若いオープンソースプロジェクトのためドキュメントが豊富ではない・気の利いたテンプレートが用意されているわけではないそうです。 今回、導入したテンプレートもCodeGridで作成されたテンプレート埋め込む形で対応しました。 のちほど、ソースを読んで自分でカスタマイズする予定です。 https://github.com/codegrid/
[Gulp][Sketch 3][hologram][SCSS][CSS]これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作るでSpriteイメージを作りました。今回はgulp-hologramプラグインとスタイルガイドジェネレータのHologramを使ってスタイルガイドを作ってみたいと思います。 Hologramについて HologramはRuby環境で動くスタイルガイドジェネレータです。Hologramは独自のテンプレートを使ってスタイルガイドをカスタマイズすることができます。スタイルガイドジェネレータには他にもStyleDoccoやKnyle Style Sheetsがあります。 Ruby環境の準備 Gemfileにgem "hologram"を追記して$ bundle installを済ませます。 sour
![[Gulp][Sketch 3][hologram][SCSS][CSS]これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
gulpで依存関係を考慮した自動コンパイル - Hatena Developer Blog
こんにちは、シニアアプリケーションエンジニアのid:taraoです。はてなエンジニアアドベントカレンダー2014の21日目として、依存先のファイルが更新されたらコンパイルしなおす処理をgulpで実現する方法について、とくにLessを例にとって紹介します。 はてなでは、JavaScriptやCSSなどの静的ファイルをTypeScriptやLessなどからコンパイルして生成することが増えています。CSS(Less)は主にデザイナが書くため、コンパイル手順はできる限り簡単にする必要があります。多くのチームでは、サーバアプリケーションをローカル環境で実行している最中はファイルの変更に応じて自動的にコンパイルしなおすようになっています。 ファイルの更新監視からコンパイルまでの処理にはGruntなどを使ってきましたが、コンパイル対象のファイルに依存関係がある場合、依存先のファイルの変更に応じて依存元の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Compiling SASS and SUSY with GULP