Combine Webpack with Gulp 4 | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You might be more used to handling your static assets with something like Gulp, and there are som
gulpその0001 gulp.watchでディレクトリ監視をしながら、そのevent.typeとevent.pathを取得して、watchの第二引数に指定して同期的に実行しているタスクの中でeventを使用する - Motomichi Works Blog
参考にさせて頂いたページ gulp.watchによる監視と、.on()によるevent取得、イベントリスナーの利用など。 これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する | Webデザイン、フロントエンド系の技術に関する備忘録 - whiskers gulp 3.5でgulp.runがdeprecatedになったそうです gulp 3.5でgulp.runがdeprecatedになりました | Web Scratch 同期的にタスクを実行する方法(指定した順番に処理完了を待ってから次のタスクを実行する方法) JavaScript - gulpのタスクを同期的に実行する方法 - Qiita 簡単に同期・非同期でタスクを実行するためのプラグイン gulp-run-sequence CoffeeScript - Gulp でタスクを並列/直列処理する
【Gulp】pngquantで圧縮した画像がMacで暗くなる場合の対処法 | たねっぱ！
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
SourcemapをRequest Headerから指定させて捗らせる話 - Qiita
SCSSなどのprecompileを使うときにはもはや当たり前のになってきたたSourcemap。 あんまり気にせず使うことも出来るが、レガシー環境などで快適に使いたくなったりするとちょいと工夫が欲しくなる。 Sourcemapを使う方法 Sourcemapを読み込む方法として、だいたい3つぐらい手法が用意されている 該当の出力コードにインラインで記載する 該当の出力コードに、別途出力したSourcemapファイルの位置を指定する X-Sourcemapのリクエストヘッダで、別途出力したSourcemapファイルの位置を指定する 出力コードに手を加えるやり方 1, 2のソースコードが手法はわりとメジャー。 結構良く説明されている。qiitaでも下記のあたりの記事が見つかった http://qiita.com/kyaido/items/04658c04a7dbe9f05c16 http://
gulp.srcがちゃんと思うたpathを読んでるかdebugする - c4se記：さっちゃんですよ☆
もっぱらGulpを使ってゐます。或いはmakeかRake。 Gulpでは、gulp.src() でpathを指定すると、そのfileをstreamとして読み出してくれ、それを pipe() の連鎖で処理していって、pipe(gulp.dest()) でfileに書き出します。gulp.src() にはnode-globの記法を使へるのですが、ちゃんと思うたfileを読んでくれてるのか、書いた指定がまちがうてないか不安になります。 cf. isaacs/node-glob https://github.com/isaacs/node-glob cf. isaacs/minimatch https://github.com/isaacs/minimatch gulp-debugを使ふ方法もあるのですが、出力する項目の融通が効かないので、簡単なpluginを自作します。 npm install
gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
リリース間近？？より便利になったgulp 4.0の変更点と移行へのポイントを紹介します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 今回は、案件で使っているgulpをv4.0にあげてみたので、その主要な変更点をいくつかご紹介したいと思います。 インストール方法 gulp 4.0の正式リリースはまだなので、下記のコマンドを叩いて直接gitリポジトリからgulpをインストールします。 npm install git://github.com/gulpjs/gulp.git#4.0 --save-dev 今回はお試しなのでローカルにインストールしています。 バージョンアップ後の大きな変更点 本稿では、変更点の中で主要な4点をピックアップしてご紹介します。 タスクに渡す関数の制約 gulp.taskの引数 直列/並列の処理 gulp.watchの引数 そのほかの変更点はこちらで確認することができます。 1. タスクに渡す関数の制約 Gulp v4 requires a str
Why Npm Scripts? | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality
[意訳]私が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)
gulpで処理結果をShift_JISに変換して出力する
僕自身はUTF-8以外を使う機会が最近無いのですが、標題の件をつぶやきで見かけたので試してみました。gulp-convert-encodingを使えば良いようです。下記はSassをコンパイルしてShift_JISで出力する例です。 'use strict'; # Load Modules gulp = require 'gulp' plugins = require('gulp-load-plugins')() # Tasks gulp.task 'styles', -> plugins.rubySass('htdocs/_scss/basic.scss') .pipe plugins.replace "UTF-8", "Shift_JIS" .pipe plugins.convertEncoding to: "shift_jis" .pipe gulp.dest('htdocs/comm
gulpを使ってsassの@importを解決しつつ差分ビルドをする - Qiita
小さいアプリケーションなら、styleは変更がある度に毎回フルビルドしてしまっても1sもかからないかもしれない。 しかし大きくなって、5s以上かかると非常に苦痛だ。 というわけで差分ビルドしたい。 Sassの差分ビルドで問題になること 差分ビルド自体は簡単で、gulp-cachedとかを使えば、前回と差分があるものだけをビルドできる。 なんだけど、その場合に問題になるのがsassの依存関係(@import)の解決だ。 単純に差分のあったファイルをビルドするだけだと、@import元を辿れない。 そうすると@import元のファイルが変更についてこない。 いや、でもnode-sassのwatchオプションって@import元辿ってるよな、あれってどうなってるんだ？？ と思って実装を見てみたら、sass-graphというnpmを使って辿っていた。 お、これ使えば差分ビルド時に依存関係の解決もで
gulpのタスクを同期的に実行する方法 - Qiita
gulpのタスクは基本的に非同期で実行されます。例えば以下のコードでは、ファイルコピーが完了する前に "done" と表示される可能性があります。 gulp.task('copy', function() { // ファイルをコピー gulp.src('src/file').pipe(gulp.dest('dest')); }); // copyに依存するタスク gulp.task('done', ['copy'], function() { // ファイルコピー完了「前」に実行される！！ console.log("copy done"); }); gulpが高速に動作する理由の一つはこの非同期性ですが、どうしても同期的に処理したい場合（すなわち特定のタスクの完了を待ってから別なタスクを実行したい場合）もあると思います。 この記事では同期的にタスクを実行する方法として、gulp API d
Gulp: Creating multiple bundles with Browserify
Published on March 25, 2015 Stefan on Mastodon Reading time: 8 minutes More on Gulp, Browserify, Tools With the ever-changing eco system of Node.js tools, a short version disclaimer. This article has been created using Gulp v3.8 Browserify Glob 5.0 Event Stream 3.3 Vinyl Source Stream 1.1 If something does not work when you’re using the same tutorial, please check if there’s been a major update ca
Gulp+Browserifyでsrc/**/*.jsをdist/**/*.jsにする | 高橋文樹.com | プログラミング
この投稿は 9年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 どうでもいい話ですが、けっこうはまったので。 最近のWebフロントエンド開発ではタスクランナー系の話題がわりと多く、僕もgruntからgulpに乗り換えて数ヶ月という感じなのですが、Browserifyを触っておいた方がいいのかなと思い、直近の趣味プロジェクトで採用してみました。 Browserifyってなに？ そもそもなのですが、Browserifyというのはnodeのrequire('hogehoe')っていう依存関係解決機能をブラウザにも持ち込もうという試みですね。 たとえばjQueryなんかでいうと、こんな感じになります。 $ = require('jquery'); $(document).ready(function(){ // 何かする }); requireを実
gulp ありの Web フロントエンド開発 - アカベコマイリ
gulp なしの Web フロントエンド開発 の追補編として gulp を利用するケースもまとめておく。元記事と同じプロジェクトと機能を gulp で実装した。記事の構成は「gulp なしの〜」を踏襲。各項の説明は package.json の scripts に代わって gulp タスクとしている。 設計方針 はじめに設計方針を決めておく。 AltJS から JavaScript へのコンパイルに対応する AltCSS から CSS へのコンパイルに対応する ファイル監視による AltJS/AltCSS の自動コンパイルに対応する ユニット テストに対応する コードド キュメント生成に対応する Windows 環境を考慮する 単体 gulpfile.js のみで実装する 方針 1 〜 6 までは「gulp なしの〜」と一緒。方針 7 は環境に関する設定を package.json と g
gulp なしの Web フロントエンド開発 - アカベコマイリ
Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって本記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulp 4.0 API (未来) で incremental foobar - Qiita
gulp.dest() returns before finishing (cb does work) · Issue #1254 · gulpjs/gulp
gulp: The Good Parts
https://stephensauceda.com/es6-in-your-gulp-tasks/