Gulpでタスクの対象外にしたいファイルやディレクトリを指定する | Webデザインのタネ
Web制作の決まりきったものを自動化するのにとても便利なGulpですが、ときにはあるディレクトリの中のディレクトリやファイルを対象外としてタスクを処理したいといったことがあります。 Sprite用の画像置き場として作っていた「_sprite/」ディレクトリを除外して納品用のファイルを作りたい Jadeでインクルード用のために作っていたディレクトリを除外してコンパイルしたい 上のような例でJadeで「_inc」ディレクトリを除外する場合には、次のようにタスクに書きます。 JavaScriptの場合 var gulp = require('gulp'); var jade = require('gulp-jade'); gulp.task('jade', function() { gulp.src(['_jade/**/*.jade', '!_jade/_inc/*.jade']) .pipe
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python hoge.js を minify したファイルを hoge.min.js として 出力する方法です. gulp-rename ってやつを使います. 拡張子を .js から .min.js に変換する gulp-rename というタスクを使います. 下記コマンドでインストールできます. $npm install --save-dev gulp-rename ついでに uglify も $npm install --save-dev gulp-uglify あとは gulpfile.js に下記のようなタス
gulp：タスクやインストール済みプラグイン・モジュールの一覧を表示する方法 - NxWorld
gulp使用時に現在どのようなタスクが定義されているか確認したり、どのプラグイン・モジュールをインストールしているかをコマンドで確認する方法です。 すごく使用頻度が高いというわけではないですが、ざっくりと定義されてるタスクを見たいときにやpackage.jsonを見に行くのが面倒なときに使えます。 定義されたタスクを確認する 定義されているタスクやどのようなタスクが組み合わさっているかなどを手っ取り確認する方法です。 例えば、自分が作成したものだけど久しぶりに触るのでどんなタスクがあったか確認したい時や他の人が作成したものでどのようなタスクを用意しているのかざっくりと確認したい時、gulpfile.jsだけで完結せずタスクがファイル分割されていてそれらすべてに目を通すのが面倒な時などに使え、下記コマンドを実行することで確認できます。
めっちゃうれしい！GulpでWordPressのテーマ開発はここまで効率化できた
Sassのコンパイルや画像の最適化、ブラウザーのリロードなど、面倒な作業を自動化できるタスクランナー。WordPressテーマの開発でも威力を発揮しそうです。設定が面倒でしょ？ と思っていた人も、これをきっかけにはじめてみたら？ Webサイトのコードは複雑化する一途で、繰り返しの作業が生じるのがごく当たり前になっています。しかし、世の中にはより優れた、効果的な開発プロセスがあるはずです。 このチュートリアルでは、Gulpを使ってWordPressのテーマ作成を自動化する方法と、ワークフローの自動化でテーマ作成のプロセスを改善する方法を紹介します。 なぜワークフローの自動化が必要なのか ワークフローを最適化することは、開発プロセスにおいて非常に有益で、取り組む価値があります。その理由をいくつか挙げます。 カスタムツールで、繰り返しの多い、つまらないタスクをすべて省ける ほかの重要なコアとなる
WordPressサイト用のgulp/gitで開発環境を作ってみた | Cntlog
先日、WordPress用のこのブログ用にテーマを作ったのですがその時、開発環境も更新してみました。 これまでSCSSくらいしか使っていなかったのですが、最近はgulpも少しずつ使えるようになってきたのでそのあたりの更新です。 githubには上げていて、リポジトリはこちらです。 gulpの構成 gulpではSCSSのコンパイル、画像・JSの圧縮、ブラウザシンク、スタイルガイドの作成を行っています。 config(設定ファイル） [javascript] //////////// // config /////////// var themeName = ‘theme-name’; //開発用ディレクトリ var develop = { ‘root’: ‘wp-content/themes/’+themeName+’/assets/’ } //コンパイル先 var release = {
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GulpでJavaScript、CSSを一括圧縮。uglifyとclean-cssの使い方
