様々なビルドツールを渡り歩いた末にLaravel Mixを選択した理由 2020年版 作業環境を晒します〜フロントエンド開発環境編〜 - arms inc. Engineers' Blog
以前の記事で、「次回はさらにフロントエンド開発に寄せて、モジュールバンドラやタスクランナーについてご紹介できたら」と予告していましたが脱線してしまいましたので、今回はビルドツールにスポットを当てたいと思います。 tech.arms-soft.co.jp ビルドツールとは 今ではフロントエンドの開発環境にはなくてはならないと言っても良いほどのツールです。 主に下記の処理を行なってくれます。 pug、EJSなどのテンプレートエンジン SASS、PostCSSなどのCSSプリプロセッサ モジュールの依存関係の解決 BabelなどのJavascriptトランスパイラ Vue、Reactなどのフレームワーク stylelint、eslintなどの構文チェッカー さらに、画像の圧縮やブラウザのオートリロードなど、様々な動作を行なってくれます。 ただ便利な反面、様々なツールが登場し続けていて、そのツール
タスクの設定 | Grunt 日本語リファレンス | js STUDIO
このガイドでは、プロジェクトでGruntファイルを使ったタスクを構成するための方法について説明します。 もし、Gruntfileのことが分からなければ、はじめにと Gruntfileサンプルを確認してみてください。 Gruntの構成 タスクの構成とターゲット オプション ファイル テンプレート 外部データのインポート Gruntの構成 タスクの構成はGruntfile内のgrunt.initConfigメソッドを通して指定されます。 この構成は、大抵の場合タスク名のプロパティ下にあり、任意のデータを含むことが可能です。 プロパティが必要とするタスクと衝突しない限り、それらは無視されます。 また、これはJavaScriptでもあるため、JSONに縛られることはありません。 ここにJavaScriptを書くことも可能です。 必要であれば、プログラム処理によって構成情報を生成しても構いません。
grunt-spritesmith
Grunt task for converting a set of images into a spritesheet and corresponding CSS variables. A folder of icons processed by grunt-spritesmith: generates a spritesheet: and CSS variables (available in CSS, JSON, SASS, SCSS, LESS, Stylus): $fork_offset_x = 0px; $fork_offset_y = 0px; $fork_width = 32px; $fork_height = 32px; ... $github_offset_x = -32px; $github_offset_y = 0px; $github_width = 32px;
CSSスプライトを生成する「grunt-spritesmith」
CSSスプライトを生成する「grunt-spritesmith」 grunt-spritesmithはCSSスプライトを生成するGruntモジュールです。 Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。 grunt-spritesmithのインストールは以下のコマンドです。 npm install grunt-spritesmith --save-dev Gruntfile.jsの内容は以下のようにします。srcで個別の画像を置くディレクトリを、destCSSで関連するCSSを書き出すファイル名(SassやLess、StylusでもOK)を、destImgで結合したスプライト画像のファイル名を指定します。 module.exports = function(grunt) { //グラントタスクの設定 grunt.initConfig({ spr
Cannot delete files outside the current working directory. · Issue #29 · gruntjs/grunt-contrib-clean
bowerでインストールしたファイルの配置を設定するにはgrunt-bower-taskが便利 - my story blog
bowerのファイル構成。デフォルトのbowerでinstallするだけだと、 （デフォルトの設定で）bower_compornentにそのライブラリのディレクトリとファイルが配置されるだけ。 プロジェクトでjs/cssを使いたい場合はその中から特定のファイルを取り出して、プロジェクト用のディレクトリに配置してそこから呼び出すようにしたい。 そこでgruntとgrunt-bower-taskを使っていい感じにjs/cssファイルを配置する方法を調べてみました。 grunt grunt grunt-bower-task yatskevich/grunt-bower-task grunt-bower-task インストールと設定 grunt-bower-taskのインストールはこちらのGithubのREADMEを参考にしてください。 bower.jsonとGruntfile.jsを作成し、以下
endlab.net - endlab リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
grunt watch が遅い時の改善方法 - Qiita
$ grunt watch Running "watch" task Waiting...OK >> File "src/sass/screen.scss" changed. Running "compass:dist" (compass) task overwrite app/css/screen.css (0.333s) Compilation took 0.342s Running "cssmin:add_banner" (cssmin) task File app/css/screen.min.css created. Running "cssmin:minify" (cssmin) task File app/css/app.min.css created. File app/css/screen.min.css created. Done, without errors. Co
node.js テンプレートエンジン ECTが爆速!! らしい件（ectの使い方）
node.jsでwebAppを作成する際、Expressを用いた様々なテンプレートエンジンが存在します。 有名ところで、「EJS」や「jade」等々とあるのですが、その中でも群を抜いて爆速といわれている（うたっている）テンプレートエンジンが「ECT」となります。 公式ページ http://ectjs.com/ 確かに、Jadeを使っていた時ページ表示の「遅さ」を感じていました。 かといって「EJS」を使おうと思っても、Express2 まで使えていたlayout、partial、block等が、 Express3からは、テンプレート部分と分離しシンプルなAPIにするため、ejs-localsに移ったようで ejs-locals github ejs-locals https://github.com/RandomEtc/ejs-locals ejs-locals インストール npm in
Gruntでディレクトリごとwatchしつつ、更新されたファイルだけにアレするには - console.lealog();
アレはアレです。 それGruntでもできるよ！！ Gulpだなんだ言う前に、もっとちゃんとGrunt使わなきゃなと思いました。 Gruntfile.js //... // いわゆるビルドの直前にやるみたく、何も気にせず全部をターゲットにしておく jshint: { files: ['/path/to/my/targets/**/*.js'], options: { jshintrc: '/path/to/my/.jshintrc' } }, // こちらも同じく copy: { main: { cwd: '..', src: '**', dest: '/path/to/dest/dir', expand: true } }, esteWatch: { options: { dirs: [ '/path/to/js/**/', '/path/to/css/**/' ], livereload
Grunt 1.0.0 がついに正式リリース、0.4.5 のリリースから約 2年
0.4.5 を最後に 2年近く開発が止まってしまっていた JavaScript タスクランナー 「Grunt」 ですが、今年 2月の 1.0.0 RC1 リリースに続き、正式リリース版の 1.0.0 が公開されました。 JavaScript タスクランナー 「Grunt」 は、0.4.x までは順調にリリースを重ねてきていましたが、2014年 5月の 0.4.5 リリースを最後に開発が止まり、その間に同じタスクランナー 「Gulp」 などの台頭によって徐々に存在感が薄まると 「Grunt おわた」 的な空気と共にフェードアウト気味でした。 そんな中、2年近くが経った今年 2月に、Grunt 1.0.0 の RC1 （リリース候補版） がリリースされ、その際、jQuery Foundation の協力によって再出発する旨がアナウンスされていましたが、昨日、正式リリース版の 1.0.0 がつい
JavaScript作業自動化ツール「Grunt 1.0.0」が登場。約2年もの開発停滞から復活
Webサイトやアプリケーション開発で発生する作業を自動化してくれるツール「Grunt」の正式リリースとなる「Grunt 1.0.0」がリリースされました。 Gruntは、いわゆるビルドツールやタスクランナーと呼ばれるソフトウェアの1つで、Node.jsをベースにしたオープンソースとして開発されています。 JavaScriptで自動化したい作業を記述でき、また多くのプラグインによって一般的な作業の多くを簡単に自動化できます。例えば特定のディレクトリを監視し、そこに保存されたファイルを自動的に処理する、といったことが可能です。 特にWebサイトやWebアプリケーション開発で発生するタスク、例えばJavaScriptファイルのミニファイ（最小化）、自動ユニットテストの実行、文法チェックなどでよく使われています。 昨年jQuery Foundationに加入し、復活したGrunt Gruntは20
Template Engine: ECT の基本的な使い方 （Grunt でコンパイル） :: log.chocolateboard
Template Engine: ECT の基本的な使い方 （Grunt でコンパイル） ECT という JavaScript テンプレートエンジンの、基本的な使い方の覚書きです。 Grunt でコンパイルする体でまとめましたので、Grunt を使わない人は、公式サイトを元に読みかえてくださいませ。 ECT - Fastest JavaScript template engine with CoffeeScript syntaxGrunt でコンパイルする設定については 過去に記事 にしましたので併せてどうぞ ^^ Indexファイルの準備Gruntfile.js にオブジェクトを用意するOutput: 用意したオブジェクトを出力するInheritance: 継承の仕組みPartials: 別ファイルを読み込んでみる（include）Blocks: 便利なブロックの使い方Condition
[Grunt]grunt-ectを使ってらくちんHTML生成 | Clipping!
コーディング中に繰り返す共通部分の修正＆コピペが地味につらかったので、自動でコンパイルしてもらうことにしました。 ECTというテンプレートエンジンを使って、Gruntでコンパイルする体でまとめます。 ちなみに、Grunt自体の導入・設定は下記のサイトでわかりやすく紹介されています。 （導入時に大変お世話になりました） Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 - KOJIKA17 Gruntで快適な環境を整備したい！【インストール編】 - riaxdnp.jp ECTとは？ ECT - Fastest JavaScript template engine with embedded CoffeeScript syntax JavaScriptのテンプレートエンジンです。 下記のようなことができます。 Inheritance（内容の継承） Partials（
![[Grunt]grunt-ectを使ってらくちんHTML生成 | Clipping!](https://cdn-ak-scissors.b.st-hatena.com/image/square/da65d117c475bc4df6bf503cddfcd7f0ed7c92dd/height=288;version=1;width=512/http%3A%2F%2Fnaoi109.github.io%2Fimages%2Fthumb%2F02.png)
edalog - テンプレートエンジンECTで静的htmlにlayout／partial導入
dreamweaverのテンプレート機能みたいなものが欲しかった かつてdreamweaverでテンプレート機能を使って、ヘッダー／フッターなどの共通部分を管理してましたが、他のエディタを使うようになってからは全ファイルに検索／置換で対応してました。 知らないだけで他に方法があるのかもしれないけど、非効率でうっかりな対応漏れページが出てしまったりといいことはなかったので、どうにかならないかなと思ってました。 （PHPでincludeとか、SSIとかあるといえばあるけど、自分の手元だけで済ませられないかなという希望がありました。） middlemanなどのstatic site generatorを少し試してみたりもしたんだけど、チームで運用するには、学習コストが高いなと感じてました。 正直自分もちゃんと使えてなかったと思う。 でもそれは全部入りのツールを使うからで、そもそもcss(sass
[意訳]私が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)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Outputting multiple spritesheets for different folders · Issue #93 · twolfson/grunt-spritesmith
grunt-ect 用パスヘルパー。require('./lib/helper').Path.setRoot でルートを指定することも可能 · GitHub
レスポンシブの表示も完璧に定義できる優れもの！スタイルガイドを作成するのに役立つテンプレート -Styleguide | コリス
GitHub - ai/autoprefixer-rails: Autoprefixer for Ruby and Ruby on Rails
