gulp-imageminはimageminプラグインをインストールすることで他のライブラリを利用することもできます。プラグイン一覧はこちらです。 gulp-imageminのインストール gulp-imageminをインストールします。インストール時にバンドルされたライブラリのチェックが行われます。 sudo npm install gulp-imagemin --save-dev Password: npm WARN package.json marke.io@1.0.0 No repository field. npm WARN package.json marke.io@1.0.0 No README data npm WARN engine imagemin@3.1.0: wanted: {"node":">=0.10.0","npm":">=2.1.5"} (current:
pngquantで圧縮した画像がMacのFirefox/Chromeで暗くなるという問題の原因と解決法に関してご紹介したいと思います。 自分はタスクランナーとしてGulpを利用しており、png画像の圧縮にはpngquantを使っているのですが、先日「MacのFirefoxとChromeだけ圧縮したpng画像の色が暗くなる」という状況に遭遇してしまいました。 色々調査した結果、原因と解決法がわかりましたので、今回はそれに関してご紹介したいと思います。 結論 Gulpでpngquantを使用する場合は以下のようにgulpfileを書いているかと思います。 var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); gulp.ta
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
みなさんはタスクランナーを使用していますか？ タスクランナーとは開発作業を自動化するためのツールで、2013年頃からWebのフロントエンド開発のトレンドとなっています。開発の現場では主にオープンソースのGulp（ガルプ）とGrunt（グラント）がよく使われています。 本記事ではGulpとGruntの両方の導入方法とウェブ制作でよく使用するプラグインの使い方を紹介します。GulpとGruntのいずれかはすでにインストールしているとして紹介します（記事末尾で付録としてインストール方法を解説しています）。 ※GruntとGulpの違いを知りたい方は記事「絶対つまずかないGulp入門」を参考ください。 この記事は2018年12月にリリースされたGulp 4に対応しています ファイルの複製 作業用のフォルダーからリリース用のフォルダーへファイルをコピーしたい時などに複製するタスクを登録しておくと便利
We have been analyzing user actions by Mixpanel. If you mind tracking, please click here to opt out.
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の変更点大
Sass plugin for Gulp. Before filing an issue, please make sure you have updated to the latest version of gulp-sass and have gone through our Common Issues and Their Fixes section. Migrating your existing project to version 5? Please read our (short!) migration guide. Support Only Active LTS and Current releases are supported. Installation To use gulp-sass, you must install both gulp-sass itself an
こもりが「Browser-Sync」のことを書いて半年が経ちました。遅れてきた皆さん、こんにちは。 先の記事でもちょっと触れたKDDIウェブコミュニケーションズさんの記事は、GoogleのWeb Starter Kitに端を発して「gulp」や「browser-sync」の使い方を紹介されてるものだと思います。 ただ、ここに書いてあるぐらいの任意のディレクトリやファイルを監視してリロードするぐらいのことなら、わざわざgulpを入れることもないしグローバルにBrowser-Syncを入れる必要もありません。 残念ながら、単体で動きます。 別にヤリとかマサカリを投げてるつもりはありませんし、書いてあることが間違えてるわけでもないのですが、そのぐらいのことならわざわざgulpとか使わなくてもなぁ…と思っただけです。もちろん、他の処理と組み合わせたりしてリロードするとかになった場合は、gulpとか
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
【追記150805】さらに憔悴しないための有用な記事『アカベコマイリ | gulp なしの Web フロントエンド開発』が掲載されましたので、こちらもお勧めします。 こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptの仕組みについて package.jsonにscriptを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広まっていました。 Grunt/Gulpで憔悴したおっさんの話 この記事については同意できるところと、そうでもないところと、両方有りました。ただ、Grunt / gulpを使っていて色々歯がゆさを感じている方は昨今増えているだろうと感じます
watchしながら作業してるときにコンパイルエラーなんかが起こってたときに、ターミナルにエラーメッセージが出てるけど気づけないときがあったので通知を導入した。 gulp-notifyを使う gulp-notify gulp-plumber エラーが出たときにgulpを終了させないgulp-plumberと、通知を出すgulp-notifyを使う。 gulp-plumberはタスク実行中にerrorイベントが発生したときに実行するerrorHandlerを指定することができる。errorHandlerにnotifyを指定すれば通知を出せる。 gulpfile CoffeeScriptのコンパイルを例に。 var gulp = require('gulp'); var plumber = require('gulp-plumber'); var notify = require('gulp-n
先日、gulp-ruby-sass 1.0.0-alpha にアップデートしたところ、Sass のコンパイルがエラーでコケるようになりました。 半年前に書いたgulp-ruby-sass 0.6 にアップデートしたらコケた話のように、オプションの指定方法が変わったのかな？と思いつつ公式リポジトリを確認したところ、タスク自体の書式が変わるようです。 sindresorhus/gulp-ruby-sass at rw/1.0： https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0 今後 1.0 未満のバージョンはサポートされないようですので、覚えておくとよさそうです。 やったことまず、gulp-ruby-sass 1.0.0-alpha にアップデートします。 $ npm update gulp-ruby-sass自分の場合、個別
To help properly handle error conditions with Node streams, this project recommends the use of pipeline, from readable-stream. Options Most of the minify options from the UglifyJS API are supported. There are a few exceptions: The sourceMap option must not be set, as it will be automatically configured based on your Gulp configuration. See the documentation for Gulp sourcemaps. Errors gulp-uglify
こんにちは。太朗です。 最近案件で使ったアイコンフォントが便利だったのでご紹介致します。 アイコンフォントのメリット スプライト画像はちょっとした色やサイズの変更も画像なので面倒ですよね。アイコンフォントを使えば色やサイズをCSSで自在に編集できるのでメンテナンスがかなり楽ちんです。なお、ベクターデータなので高解像度デバイスにも対応できます！ アイコンフォントをgulpで作る では、どうやってアイコンフォントを作るのか？作り方は色々ありますが、一番手っ取り早いのはgulpで自動で生成させることです。なおgulpのインストールなどは省略させてもらいます。 以下がgulpファイルの例です。 gulp.coffee 'use strict'; gulp = require 'gulp' $ = require('gulp-load-plugins')() # svg を圧縮する gulp.tas
こんにちは！スタッフのめぐみです。 今回は私が Web 制作の際に使用している gulp というビルドシステムの紹介をしたいと思います。 タイトルの通り gulp を試してみよう！ということで、用意したサンプルを使って実際に手を動かしながら記事を読み進めてみてください。 ※ この記事では sass (ver 3.1 以上)がすでにインストールされているものとして話を進めますので、ご留意下さい。 gulp とは gulp は Node.js をベースにした、 Sass のコンパイルや js ファイルの結合・圧縮などを自動化してくれるビルドシステム(ツール)です。同じようなものに Grunt があり、タスクの記述の仕方が違いますができることはほとんど同じです。gulp の場合、必要なタスクはgulpfile.jsに記述します。 ちなみに、 Node.js についての説明は割愛します。以下の記事
これからはじめるGulp #1：bundler, rbenv, nodebrewでGulp環境を作ってみる はじめに 今までGruntばかり使って来て、そろそろGulpも使っておこうということで、Wordpressテーマを作るついでに勉強したことをメモしていきます。12月ということで、アドベントカレンダーの季節ですが、他の方が主催しているアドベントカレンダーに参加できるほど知識も経験もないので、一人アドベントカレンダーをやることにしました。良いテクニックの紹介というよりは完全に個人的に勉強した内容をアウトプットしているだけなので、すでに使いこなしている方はトップページから他の記事を読んだ方が有意義だと思います。 今回はとりあえずbundler, rbenv, nodebrewが用意されている環境でgulpが実行できるところまで進めます。bundler, rbenv, nodebrewが出る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
