Gulp.jsとPostCSSを使ってCSSの面倒な作業をなくそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
Medium
You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories will take you somewhere new?
gulp-watchify を試す - アカベコマイリ
これまで Browserify/watchify 関連の gulp タスクは greypants/gulp-starter を参考に自前で定義していたのだが、処理の長さゆえ複数ファイルに分割せざるを得ず見通しがよくないと感じていた。 そこで Browserify/watchify 周りの機能を gulp プラグイン化した gulp-watchify を試してみる。 基本的な使い方 gulp-watchify のサンプル コードは GitHub リポジトリ内の examples ディレクトリに公開されている。 marcello3d/gulp-watchify Transform は setup 関数内で実行、Uglify は pipe 上で処理しているようだ。しかし Browserify オプションについては触れられていない。Source Maps 出力などはどうすればよいのだろう？ 高度？
SLOBSERVER - L'actualité de Second Life
There are several aspects to consider when releasing a product or service into the market. With so much competition in all sectors, it might be hard for your product to stand out if you don't start by marketing it properly. Marketing, as well as how a user reacts to your product, is something that you should think of from the inception of your product to its launch. The Time to Market plays a sign
Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境
Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 browserify とは そんなに詳しくないのですが、browserify はざっくりと言えば js で requireを使えるようにするためのツールです。今までであれば複数の js ファイルが必要な場合、例えば、a.js と、a.js がないと動かないb.js を読み込む場合だと、HTML ファイルに下記のような記述が必要でした。 // index.html <script src=".js/a.js"></script> <script src=".js/b.js"></script> browserify を使
[Gulp]これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化でgulp-imageminプラグインを試しました。今回は前回のimageminタスクにgulp-changedプラグインを使って更新されたファイルのみ処理できるよう改良してみます。 gulp-changedプラグインについて gulp-changedプラグインはsrcとdestをチェックして変更されたファイルだけをStreamに流します。gulp-changedプラグイン以外にもgulp-cached, gulp-remember, gulp-newerなどのプラグインがありそれぞれの特徴に合わせて活用することで無駄な処理を減らし待機時間を減らすことができます。 gulp-c
![[Gulp]これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる](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)
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
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/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
ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX
Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。 フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。 Rinは、だいたい下記のようなことがすば
gulpのアプローチ
gulpのGetting Startedにもあるように、gulpを使うにはグローバルインストールとローカルインストールが必要になる。なんで同じものを2つインストールするのか、不思議に思ってソース読んで「へー」と思ったのでまとめてみる。 Gruntの場合 Gruntの場合はgrunt-cliをグローバルにインストールしてgruntはローカルにインストールする。grunt-cliはローカルにインストールしたgruntを呼び出すためだけのモジュールだ。タスクを走らすgruntと、そのgruntを実行するgrunt-cli、2つのモジュールは明確に役割が切り離されている。 Gruntがこうなってる理由は、異なるプロジェクトで使ってるgruntのバージョンが違うと、グローバルにインストールされてるgruntのバージョン次第で、そのタスク（Gruntfile）が動かせない可能性が出てくるから。 （参考
noxoc.de - このウェブサイトは販売用です！ - noxoc リソースおよび情報
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.
gulpをGUIで使うためのアレコレ - Qiita
まだ、まとめるには早いかなと思いつつ、そろそろ動きがありそうなので、今後もこのページをアップデートしていくつもりで書いてみます。 gulp-app (まだα版) 最初に本命から。さきほど、リポジトリが公開されたばかりで、まだすぐ使えるという段階ではないものの、Finderで対象ディレクトリを開いておくと、gulpfile.jsを読み取って、タスクをメニューバーに表示してくれる「これが欲しかったんだ!」的なアプリ。node-webkitで実装されています。 対応環境: Mac URL: https://github.com/sindresorhus/gulp-app エディタから利用するタイプ Sublime向け: sublime-gulp Atom向け: gulp-helper そのほか、統合環境での利用について、いくつかアナウンスが出ているみたい。 Webstorm は 次のバージョンで
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
ビルドツール「gulp.js」を使ってみる | MONSTER DIVE
みなさま。あけましておめでとうございます。 2014年初投稿になります。 そんな初投稿の記事はビルドツールです。 が、あえてGruntじゃなくgulpというStreamin build systemのお話です。 gulpとは？（Gruntとの違いは？） gulpは最近リリースされた、Gruntに対抗したJavaScriptタスクランナーです。 主にGruntの良い所を引き継ぎつつ、Gruntの短所を吸収するために開発されたらしい。 後述しますが、Gruntの設定ファイルであるGruntfile.jsは非常に長ったらしくなってしまいます。 ちょっとしたテストを走らせたい時にも結構な量のJavaScriptを書かないといけないのですが、このgulpはその設定ファイルであるgulpfile.jsをシンプルかつ簡潔に書くことが可能です。 詳しくはこちらのページが参考になります。 gulpを設定しよ
打倒Grunt！Node.js用の新たなビルドシステムgulpことはじめ | OpenWeb
メリークリスマス！ このブログは、HTML5 Advent Calendar 2013の12/25用です。 とはいえ、HTML5カンファレンスとかあったせいで、最近あまり技術的なトピックを追っておらず・・・ ここは、つい最近目にした gulp というプロダクトを触ってみたレポートでもしようかと思います。 Node.js製なので、実はHTML5ともあんまり関係ない。すいませんすいません gulpは、自身のことを「ストリーミング・ビルド・システム」と称しています。つまり、Gruntなどと同カテゴリの「ビルド用ツール」です。 Gruntは、JSON形式で宣言的にタスクのパラメータを記述していく形式です。慣れればスッキリしていて見やすいし、設定を変更するのも容易なのですが、細かくタスクの動作を制御する必要が生じた時に「何をどうすれば求める結果が得られるのか？」がわかりにくいという欠点があります。あ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Use gulp to select and move directories and their files
Log in to Your Account · GitBook (Legacy)
GitHub - GulpFiction/gulpfiction: Graphical editor to create your gulpfile
re-dzine.net situs togel online toto 2023 -