gulp v4.0を眺めてみた
gulpfileをES6に置き換える必要があり、何気にgulpの情報追っていると、 そろそろv4.0がリリースされそうなのでざっくりと眺めてみた。 gulpfileをES6で書くまず、本来の目的だったこの件、v3.9ですでに対応されていた。 以下の条件であれば利用可能のようだった。 gulp v3.9以上 gulpfile.jsをgulpfile.babel.jsとする babel-core をインストールすること 内部的にはbabelで変換しているようだ。 続いて、v4.0のCAHNGELOGも眺めてみた。 gulp4.0をインストール cliの変更点--tasks-json と --verify オプションが追加されてる。 –task-json はタスクをjson形式で出力する。 –verify はpluginsがpackage.jsonを参照しているかチェックする。 APIの変更点大
gulpでphp環境 ～ gulp-connect-php ～ - Qiita
npm init npm install --save-dev gulp npm install --save-dev gulp-connect-php npm install --save-dev browser-sync var gulp = require('gulp'), connect = require('gulp-connect-php'), browserSync = require('browser-sync'); gulp.task('connect-sync', function() { connect.server({ port:8001, base:'www' }, function (){ browserSync({ proxy: 'localhost:8001' }); }); }); gulp.task('reload', function(){ brows
LESS/Sass/CSSのごった煮コンパイル (gulp版) - Qiita
gulp.jsでは、複数のソースから別々の処理をさせた上で、途中で合流させて1ファイルにコンパイルすることも可能です。 例えば、こんなふたつ↓をコンパイルすることを考えます。 軽量化してLessの変数をカスタマイズしたbootstrap Smacssで書かれたピュアCSSのプロジェクト ここでは公式のレシピを参考に、streamqueueでストリームを合流させてみました。streamqueueは順序を保持するので、結合順は常に bootstrap > smacss になります。 gulp = require 'gulp' less = require 'gulp-less' cssimport = require 'gulp-cssimport' autoprefixer = require 'gulp-autoprefixer' concat = require 'gulp-concat
[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)
gulp-rsync
Use the file transferring and syncing capabilities of rsync within your Gulp task. gulp-rsync calls rsync and offers you a subset of options for an easy setup. Prerequisites rsync needs to be installed on your machine and must be sitting in your PATH. Installation npm install gulp-rsync --save-dev Usage var gulp = require('gulp'); var rsync = require('gulp-rsync'); gulp.task('deploy', function() {
Gruntとgulp.jsでサイトパフォーマンスを向上させる - ワザノバ | wazanova
@yosuke_furukawaさんがtweetしていたサイトパフォーマンスに関連する Gruntとgulp.js のタスク一覧です。確かによいまとめなので、メモしておきます。 GruntとGulpには、画像の最適化、HTML/CSS/JavaScriptファイルの結合 & 圧縮をするタスクがあるので、まずそちらをベースラインとして利用されたし。 1) 画像ファイルの圧縮 & 最適化 webページは平均1.5MBで画像ファイルが多くを占める。モバイルで160KBの画像ファイルを追加すると直帰率が12%悪化すえるというEtsyのデータがあり。 Grunt grunt-contrib-imagemin grunt-imageoptim (OSXのみ） 二つのタスクのどちらを選ぶかは、こちらの比較表 で確認してください。 Gulp gulp-imagemin 3/4/2014時点ではImage
Gulp
Consulting, training, products, professional services contact@wearefractal.com We should have some ways of connecting programs like garden hose--screw in another segment when it becomes necessary to massage data in another way. This is the way of IO also. - Doug McIlroy Streams come to us from the earliest days of unix and have proven themselves over the decades as a dependable way to compose larg
Browsersync + Gulp.js
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); // Static server gulp.task('browser-sync', function() { browserSync.init({ server: { baseDir: "./" } }); }); // or... gulp.task('browser-sync', function() { browserSync.init({ proxy: "yourlocal.dev" }); }); SASS + CSS Injecting ^ TOP Streams are supported in Browsersync, so you can call reload at specific points during
minimatch（node.js で path match するライブラリ）のチートシートを作った - 詩と創作・思索のひろば
minimatch っていうのは Grunt や gulp.js その他あちこちで（npm もらしい）使われてるグロブマッチライブラリです。最近よく gulp を使ってるんだけど、毎回 gulp.src() の書き方で迷ってしまう。調べた結果 minimatch に行き当たったんだけど各種 glob 実装のドキュメント読んで把握しろ、という感じでよく分からなかったので早見表を作った次第です。 https://github.com/motemen/minimatch-cheat-sheet 確認用にテストを書いていて、そのテストケースからドキュメントを生成してるので間違いはないはずです。説明が間違ってる、この例も乗せた方が見やすいだろ、とかあればプルリクください。 折角なので日本語版を書いておきますね。 基本 * はパスセパレータを含まない任意の文字列にマッチ ** はパスセパレータを含む任
LiveReload から BrowserSync に乗り換えてる
LiveReload から BrowserSync に乗り換えてる 2014-06-24 この記事を書いて放置していたら、GoogleからWebアプリケーション開発用テンプレートのWeb Starter Kitに、BrowserSyncが利用されていました。 まだまだ把握しきれていませんが、需要がありそうなので、どんなことができるか簡単な導入方法を紹介します。 BrowserSyncの利点 BrowserSyncは、その名の通り「ブラウザを同期」してくれます。 LiveReloadのように、HTMLファイルなどを編集、保存するとブラウザをリアルタイムに更新を行い、さらにGoogle Chromeで行ったブラウザの「操作」が、Firefoxなどの他のブラウザにも、リアルタイムに反映されます。 BrowserSyncを利用すると、開発から確認までが、スムーズに行えます。 BrowserSync
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
gulp.jsでWeb開発環境をつくる - Qiita
. ├── gulpfile.js ├── package.json ├── .jshintrc └── src ├── images │ └── picture.jpg ├── index.html ├── page.html ├── scripts │ ├── lib │ │ └── jquery.js │ └── main.js └── styles ├── main.scss └── sub.scss var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserSync = require('browser-sync'); var rimraf = require('rimraf'); var runSequence = require('run-sequence'
gulp.js その4 プラグイン一覧 - Qiita
gulpで使うプラグインやnpmモジュールをピックアップ 更新履歴 2016-03-11 更新 2014-07-25 gulp-bower-files がdeprecateされていた。代替は main-bower-files 2014-07-24 gulp-connect がdeprecateされた。代替は後継の gulp-webserver 2014-06-29 gulp-clean の箇所を修正（shinnn様にご指摘いただきました。感謝！m(_ _)m） 今は使わない方が良いプラグインリスト - gulpjs/plugins - github ↑要チェック。この記事には未反映 Webサーバー、ユーティリティ browser-sync Webサーバー/ライブリロード gulp-webserver Webサーバー/ライブリロード ※browser-syncに乗り換えた gulp-conn
gulp.js その2 gulp-webserverでWebサーバー/ライブリロード - Qiita
gulp-webserverプラグインは、開発用のWebサーバーを簡単に立ち上げることができるgulpプラグイン。gulp-connect(すでにdeprecated)を書き直したものである ライブリロード機能も付いてるので gulp-livereload などは不要。ブラウザで表示確認しながら作業に専念することができる node.jsのサーバーなのでPHPは動かない。PHPを動かしたい場合はApache(MacならMAMPにも含む)やnginxを使うこと インストール・使い方 gulpがインストールされていることが前提 gulp-webserver プラグインのインストール npmで開発用としてインストール npm install --save-dev gulp-webserver (今回はプロジェクトディレクトリに入れる。-g オプションでグローバルに(ホームディレクトリ直下)) gu
Introduction | Gulp: the modern frontend factory
Gulp: the modern frontend factory I'm excited everyday I write front-end code with these amazing tools we now have to build client-side apps with pleasure. I liked JavaScript but typing so many brackets was killing my keyboard, then I discovered CoffeeScript. I was desperately trying to rationalize my copy and paste activity for selectors in CSS, but that was before LESS saved my life. I got lost
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
gulpとnode.jsの連携
gulpとnode.jsの連携 Gruntと比較してgulpがイケてるなと思うのはnode.jsつまりJavaScriptを利用してカジュアルにタスクをカスタマイズできるところです。 たとえば、昨日書いたSassをコンパイルするタスクは以下のようにnode.jsでカスタマイズするとかなり便利になった。 var gulp = require('gulp'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var fs = require('fs'); var path = require("path"); //config var root = "htdocs", config = { "path" : { "htdocs" : root, "sass" : root+"/s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nariyu/gulp-dir-sync: Gulp task for synchronizing 2 directories.
Simple And Awesome Gulp Setup | kyco blog
http://blog.e-riverstyle.com/2014/02/gulpspritesmithcss-spritegulp.html
