Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
Gulpを克服する - Qiita
コンパイル 圧縮 保存 といった動作を自動でやってくれる賢いGulp。 でも環境構築はいつもひとまかせ。 さすがに覚えようと、うちの会社でちょくちょくやってる勉強会に参加しました。 #準備 ##node.jsのダウンロード Gulpはnode.jsで動いてるのでまずはダウンロードします。 バージョンについては4, 6などの偶数はLTS対応、5などの奇数は挑戦的な新機能を含むものらしい。 私は5でした。 ##gulpをインストール $ npm i -g gulpでgulpをインストール。 ##フォルダつくる gulpfile.jsをつくる $npm init でpackage.jsonをゲットする $npm i gulp node_modulesでnode_modulesもいれる フォルダ名が"gulp"だとうまくいかないので、もしそうしちゃった場合はpackage.jsonの"name"を
Gulp でタスクを並列/直列処理する - Qiita
目的 Grunt と違って Gulp は登録したタスクが並列で実行されていきます。 しかし、Gulp のタスクも自在に直列/並列化したいのです！ 方法 調べたらよいものがありました。run-seqence を使うだけ。 記述例 図のように clean タスクが終わったら並列に jade、sass、coffee タスクを実行。これらのタスクが全て終わったら deploy タスクを実行と言うように、3 段階にタスクを直列、その中で複数のタスクを並列にします。 var runSequence = require('run-sequence'); gulp.task('default', function(callback) { return runSequence( 'clean', ['jade', 'sass', 'coffee'], 'deploy', callback ); });
tmuxを使って同一コンソール内で複数のdocker runを行ったメモ。webpack , karma, gulp + express + socket.io , mongodb. - Qiita
#prefix C-aに変更する set -g prefix C-a # C-bのキーバインドを解除する unbind C-b # キーストロークのディレイを減らす set -sg escape-time 1 # ウィンドウのインデックスを1から始める set -g base-index 1 # ペインのインデックスを1から始める setw -g pane-base-index 1 # 設定ファイルをリロードする bind r source-file ~/.tmux.conf \; display "Reloaded!" # C-a*2でtmux内のプログラムにC-aを送る bind C-a send-prefix # | でペインを縦に分割する bind | split-window -h # - でペインを横に分割する bind - split-window -v # Vimのキーバイ
gulp4.0 migration guide - Qiita
背景 ひと昔前までフロント側build toolと言えば grunt が主流でしたが、今は gulp が主流になりました。 gulpは現在のところ3.9が最新ですが、水面下では4.0が準備中です。 4.0は久しぶりの major version release だけあって、結構な breaking changes が含まれる予定です。 4.0がいつリリースされるかは分かりませんが、 4.0 branch は用意されていて、そのほとんどの機能はもう動かすことができます。 本エントリではchangelogを見ながら、その機能を実際に試していって、どういったものか説明していこうと思います。 今回書いたコードはgithubにあげたので、もし試したい方がいればどうぞ。 資料 changelog API document バージョン $ ./node_modules/gulp/node_modules
gulp-tscとgulp-typescriptの利用方法の違いについて - Qiita
gulpでTypeScriptをコンパイルするプラグインはいくつか種類があるようですが、今のところ自分はgulp-tscとgulp-typescriptの2つを試しながら使っています。 両方使ってみると分かるのですが、利用方法にかなり違いがあるのでお好みに合わせて選ぶと良いのではと思っています。 今回はそんな2つのプラグインの利用方法の違いについて説明します。 と、その前に。 書いている途中で気づいたのですが、今現在のgulp-tscは最新のTypeScriptを利用すると上手く動作しない場合があるようです。 GitHubのIssuesでも報告されていてPull RequestsにPRがたまっているので、これらを参考にしながら自分で修正すれば直るかもしれませんがまだ試せていません。 自分の環境だと/// <reference path="...">の指定がコンパイラに正しく解釈されずにコン
gulp.srcのglobからtsconfig.jsonのfilesを更新するプラグインを作った - Qiita
[追記] Gulpプラグインで受け取れるファイルストリームが順不同で、実行するたびにfilesの順序が変わる可能性がある。 ので、atom-typescriptと同じようにfilesGlobを展開するだけのCLIを作ったのでこっちを使って欲しい。 laco0416/tsconfig-cli Globの展開に使ってるのはatom-typescriptの内部でも使われてるTypeStrong/tsconfigなので、割と信用していいはず。少なくともnpmにある他のtsconfig展開系CLIはどれも独自にglob展開しているので使いたくなかった。 tsconfigに設定を集める、タスクランナーに設定を持たないべきという思想のメモという意味でこの記事は残す @laco0416です。gulp.srcのglobパターンからtsconfig.jsonのfilesを更新するプラグインを作りました。 gu
gulpのタスクを同期的に実行する方法 - Qiita
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 docsに記載されているもの、そしてその発展形を紹介します。 タスク内の非同期処理が一つだけの場合 Streamをreturnする まずは1番お手軽な
ファイル削除にはgulpプラグインを使わない - Qiita
要約 rimrafかdelを使用しましょう。 はじめに gulp.jsにおいて、かつてはファイル削除のためのプラグインとしてgulp-rimrafやgulp-cleanが存在しましたが、どちらもdeprecateされました。gulp.srcを用いない、ファイル削除以外の余分な処理を行わない手段を用いれば、これらのプラグインを使用する必要はありません。 単一のファイル／ディレクトリを削除する rimrafを使用します。従来より、gulp-rimrafの作者が推奨している方法です。 var rimraf = require('rimraf'); gulp.task('clean', function (cb) { rimraf('./dir', cb); }); gulp.task('build', ['clean'], function() { // Something });
browserifyでgulp-plumberが効かない時の対処方法 - Qiita
gulpでwatch中に、何かしらエラーが発生した場合、通常watchもろともgulpが終了してしまい、もう一度watchをしなくてはならなくなってしまいます。 これが何度もあると非常にストレスが溜まって体に良くない。 ここで便利なのが、gulp-plumber。こいつを用いることによってエラーをした後もwatchが止まらないで済みます。gulp-notifyというやつを入れると通知が出てさらに便利になります。 しかし、browserifyでjsをがっちゃんこさせるときに、jsがおかしいとplumberでもエラーを制御することが出来ませんでした。 gulp-starterで解決 gulp-starter 上記ファイル内の、 gulp/util/handleErrors.js var notify = require("gulp-notify"); module.exports = func
vendor prefix, minify, 開発/本番用ビルドの切り替え... CSSのあれこれをGulpにさせてみた - Qiita
普段業務ではタスクランナーにGruntを使っているのですが、別件で簡単なアプリケーションを作ることになりました。 小さいプロジェクトにはGruntよりGulpがいいんじゃない？とか 今流行ってるし一回使ってみるかとか そういう気分で試してみたので、メモを兼ねて紹介します。 GruntとGulpの違い Grunt：「設定ファイル」に近い 箇条書きのようにつらつらと設定を書いていくため、タスクの流れを読みづらく、膨大になりやすいという欠点がある。（もちろんとても便利ですが） （今のプロジェクトではcoffeeで書いてるのに700行くらいあって泣いてる） Gulp：処理を「プロセス」として記述 あれをこうしてここに入れる、と処理が一連のプロセスになるので、読みやすい。 あとなんか速いらしい。（曖昧） 大体このくらいの認識です。 バージョンとか node: v0.10.29 下記をpackage.
gulp + webpack + mocha + assertでブラウザとコンソール両方でテストするサンプル - Qiita
var gulp = require('gulp'); var gutil = require('gulp-util'); var webpack = require('webpack'); var WebpackDevServer = require('webpack-dev-server'); var webpackConfig = require('./webpack.config.js'); var open = require('gulp-open'); var mocha = require('gulp-mocha'); // default task is browser test gulp.task('default', ['browser-test']); // browser test gulp.task('browser-test', function (callba
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpackやGulpを使う時に覚えて幸せになったnpmの便利な使い方 - Qiita
gulp の run-sequence を使うときは return を忘れずに - Qiita
PhoenixフレームワークでBrunchもGulpもGruntも使いたくない場合 - Qiita
特定のディレクトリだけをGitHub Pagesにデプロイするためにgulpを使う - Qiita
Riot.jsのHTML部分をJadeで書いてgulpするメモ - Qiita
gulpを用いてplantUMLの生成自動化 - Qiita
gulpとprotractorでAngularJSを自動テストする - Qiita