gulpjs公式ブログでもアナウンスされたように、2018年12月にGulp4が正式にリリースされました。Gulp4未満は数ヶ月後から非推奨になるようです。 「Gulp4」で検索すると、それぞれが違う書き方をしていました。この記事ではgulp.jsの公式ドキュメントを参考に、Gulp3からGulp4に移行するための情報をまとめています。 gulp.task()が非推奨になり、関数宣言とexportsが推奨になった run-sequenceを使った直列・並列処理を、公式APIのseries()とparallel()で実行できるようになった gulp.watch()の第二引数が配列から関数名になった 公式APIにsourcemapsオプションが追加された 公式APIのgulp.lastRun()で差分ビルドができるようになった gulp.task()が非推奨になり、関数宣言とexportsが推
こんにちは、柴田です。 今回はGulpを使ったJamstackのチュートリアルのご紹介です。 いつの間にかにGulpは4系になっていたんですね〜。（しばらく触っていなかったので久々でした） Gulpとは2015年あたりで一斉を風靡したタスクランナーというやつですね。 タスクを記述することで、scssをcssに変換したり、JavaScriptをminifyしたり、ブラウザをホットリロードさせたり色々できます。 EJSでHTMLを静的生成EJSというテンプレートエンジンをご存知でしょうか。 JSONをEJSテンプレートに渡すことで値を動的にセットできるので、ExpressなどNodeのフレームワークと組み合わせて使われることが多いです。 GulpからEJSテンプレートにJSONを渡してHTMLを生成するという方式もあります。 その場合、大抵JSONファイルはローカルに置かれており、ファイルを直
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記
今回はフロントエンドの開発環境についてのメモ。 gulpやwebpackなどの環境設定について。 まだgulp？ gulpってもう古くない？まだ使ってんの？ ってツッコミがありそうですが、僕の開発環境ではまだまだ現役です！ gulp.jsから卒業！や、もういらない！など、検索するといろいろな記事が出てきますが、個人的にはJSとCSSさえビルドできればなんでも一緒です。 そうなるとますますgulpじゃなくてもええやん。ってなりそうですが、 昔から特にgulpで消耗したこともないですし、他に変えるコストを考えるとバージョン上げて使い続ける方が楽だったので使い続けています。 とは言え、gulpを使っていてもフロントの開発環境はすぐに新しくなって変わっていくので、古くなったサイトの環境が今と合わなくてよく開発環境の立ち上げ方や使い方を忘れたりします。 そんなときのために今の開発環境を備忘録として残
This content is not yet available in English - I'm working on it. ※ Babel 7.4.0で @babel/polyfill が非推奨となり、その修正とあわせて記事全体を加筆・修正いたしました。（2019/10/2） ES6で開発を行うにあたりwebpackやBabelを使用した環境を、公式サイトやブログを参考にしながら整理しました。普段ボイラープレートとして使用しています。 対応するもの ES6をES5に変換 jQueryなどを使用する場合はプロジェクトのJSファイルとは別にバンドル SASSを使用 CSSファイルはJSファイルとは別に出力 CSSのベンダープレフィックスを自動で付与 開発時はローカルサーバーを起動してホッとリロードさせる 環境・ツール webpack Babel Sass ESLint 設定方法 /**
2分でできる、gulpとTinyPNGで画像圧縮を自動化する方法
ブログをやってるとスクショやイメージ画像を撮って、ツールまたはWebサービスを使って画像を圧縮すると思う。私の場合は、画像圧縮には劣化が少なく圧縮率がハンパない「TinyPNG」というWebサービスを使っている。 ただ、意外と面倒なことが多い。 対象の画像ファイルを選ぶ（しかも1度に20ファイルまで）、そして圧縮が終わったらひとつずつリンクをクリックしてダウンロードしなければならない。 画像ファイルが5つ以上になると、結構メンドくさい。 ということで、gulpを使って画像圧縮を自動化してみた！ ※Node.js、npmがすでにインストールされているなら、2分ほどで完成するだろう。 （「記事読むだけで2分以上かかるだろ！」ってツッコミは…ホントごめんなさい。） 0. Node.jsがインストールされていない場合 gulpを使うにはNode.jsが必要。 Node.jsの公式サイトからダウンロ
gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについて HTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できる HTMLにテンプレートタグを埋め込む形なので学習コストが低い → PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能（gulp/Gruntなどと連携すると簡単そう） よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります（いわゆる短縮文法）。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス
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(ガルプ)。前記事ではGulpで使うべきミニマムに抑えたプラグインを紹介しました。 当然仕事をする上では複数の案件のファイルを触ると思います。ですがその度にGulpファイルとプラグインをインストールしていてはどんどん肥大化してしまい、PCのストレージを食ってしまいますよね。 Gulpファイルとプラグインを1度インストールし、それを案件毎に使いまわせるような配置と設定をし、Gulpをもっと効率的に使いこなすテクニックをご紹介します。 [2018/1/16 →gulpfile.jsの中身を更新しました] まずはGulpのキモ、gulpfile.jsを作成するgulpfile.jsをいかに上手に作るかがGulpのチカラを発揮させるキモになります。ここは個人のオリジナリティも出るところなので、コレが正解！というのもありませんので、皆さんの使いやすいよう
config.json DRYを保持出来るだけでなく、config.jsonはgruntのような別のタスクランナーでも使用出来るという利点もあります。 { "desktop" : { "src" : [ "dev/desktop/js/**/*.js", "!dev/desktop/js/vendor/**" ], "dest" : "build/desktop/js" }, "mobile" : { "src" : [ "dev/mobile/js/**/*.js", "!dev/mobile/js/vendor/**" ], "dest" : "build/mobile/js" } } gulpfile.js npm install --save-dev gulp gulp-uglify var gulp = require('gulp'); var uglify = require(
gulpfile.js の分割方法について。 gulp タスクが増えてくると gulpfile.js が長くなってメンテナンスしづらい。また、タスク間で共通したい設定があるとして、それを gulpfile.js 内で定義しはじめると更にファイルは伸びてゆく。この問題を解決するため、以下のプロジェクトを参考にタスクを個別ファイルとして定義してみる。 greypants/gulp-starter ディレクトリ構成 プロジェクトのディレクトリ構成は以下のようになる。 / ├ package.json ├ gulpfile.js ├ gulp/ │ ├ config.js │ ├ tasks/ │ │ └ gulp タスクごとのファイル │ └ util/ │ └ gulp タスクで利用する便利モジュール ├ bower_components │ └ アプリから利用する Bower モジュール ├
Gulpのインストールは1つでOK。複数のプロジェクトごとに設定ファイルを分割、さらに監視を行い、更新があったファイルのみタスクを実行させる方法 「1つの開発環境で複数のプロジェクトを管理」することって私はよくあります。 これまでは「プロジェクトが増えるたびにGulpをインストールする」運用をしていました。 ですが、この運用を続けていくと、プロジェクトが増えるごとにGulpのインストールが必要だし、npmパッケージやgulpプラグインも更新しないといけないし、タスクもプロジェクトごとに作る必要があるし、何よりディスク容量が増えてしまいますね。 図で表すと、以下のような状態です。 プロジェクトが増えるたびにGulpをインストールの図 これはあまり効率的とは言えない・・・ というわけで、この状態を解消するため「Gulpのインストールは1つにして、複数のプロジェクトを分割して管理する」方法を書き
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
{ "devDependencies": { "eslint": "github:eslint/eslint", "husky": "github:typicode/husky", "tslint": "github:palantir/tslint", "lint-staged": "github:okonet/lint-staged", "npm-run-all": "github:mysticatea/npm-run-all", "prettier": "github:prettier/prettier" } } Formatter is 正義 JavaScript 業界がここ数年でSyntaxが豊かになるだけでなく、何より開発環境が劇的に進化したと感じています。 代表的なものとしては TypeScript や FlowType のような型情報を付与する概念ですが、 合わせてストレスフ
EJSを使用している環境でtitleやmeta name="description"といったメタ情報をJSONファイルひとつで管理できるようにする方法です。 紹介する方法はgulpを使用した実装方法になるので、予めgulpが使用できる環境を用意してください。 EJSの基本的な使用方法などについては割愛しているので、「EJS -- Embedded JavaScript templates」や「GitHub - mde/ejs: Embedded JavaScript templates」などで確認してください。 使用するプラグインとファイル構成 プラグインのインストール 今回はgulpでEJSを使用するので、まず下記コマンドで「gulp-ejs」をインストールします。
/** * sass compile setting * scss/ディレクトリのscssをコンパイルする */ gulp.task(‘sass’ , function(){ return sass( dir.top + `/【common/scss/など、特定のディレクトリをいちいち書く】/*.scss` , { compass : true, style: ‘expanded’ }) .pipe(autoprefixer()) .pipe(csscomb()) .pipe(plumber({ errorHandler : notify.onError(‘<%= error.message %>’) //gulp notify エラーメッセージ })) .pipe(gulp.dest( dir.top + ‘/【/common/css/など、書き出し先をいちいち書く】’));
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
