爆速でコーディングをするための環境構築方法。Go-NextブログGo-Nextトップお問い合わせすべてWEBマーケティングサーバー・ネットワークライフスタイルお知らせHOME/WEB/ソフト・ツール/Gulpの使い方。爆速でコーディングをするための環境構築方法。2016.04.13WEBGulpの使い方。爆速でコーディングをするための環境構築方法。デザインちーむツール効率化Gulpどーも、デザインちーむのさむです。相変わらず、Huluにはまって抜け出せそうにない感がハンパない今日この頃です。前からこの番組にハマってます!「サバイバルゲーム」イギリス軍特殊部隊の元隊員ベア・グリルスが普通の旅行者が最も過酷な環境下に置かれたときのサバイバルテクニックを伝授する番組。それはさておき、本日取り上げるのは、今さら感のある「Gulp」についてです。みなさん使ってますか???使わないとヤバいですよ!業界ではデファクトスタンダードになってる感がとてつもないですから。以前書いた「Grunt」とほぼ同等の機能を持っていますが、シンプルな記述と高速な動作で現在は「Gulp」の方が主流なのではないでしょうか。最近では「WebPack」も人気があるようですね。以前の記事はこちら「Gruntの使い方。作業効率を上げる便利な自動タスクツール。」ではでは、そんな便利なツールの説明をしていきます。さいごにGulpとは「Grunt」と同様でフロントエンド周りの様々なタスクを自動で行ってくれるタスク自動化ツールです。CSSのminify、画像の圧縮、ベンダープレフィックス自動付与などなどです。導入することによって間違いなく作業効率が上がります!公式サイトは以下になります。http://gulpjs.com/Gruntとの違い「Grunt」は質実剛健な堅物。「Gulp」は今っぽい感じで、シンプルで柔軟に書くことができる。並列処理を行うので処理速度が速い。そのような感じでしょうか。手を動かしてみましょう。Node.jsのインストールこちらの手順は以前の記事に書いてあるので、そちらをご確認ください。手順はこちら「Gruntの使い方。作業効率を上げる便利な自動タスクツール。続いては、作業をするディレクトリを作成します。どこでも良いのですが分かりやすい場所にすると良いと思います。今回はデスクトップに作成したいと思います。gulp_devデスクトップにgulp_devというフォルダを作成しました。(CUIでの操作表示となってますが、GUIで操作し作成しても問題ありません)続いて、作成したディレクトリに移動します。init移動したら次のコマンドを入力します。init色々な質問が出てきますが、とりあえずすべてEnterを押して進めてください。(yes)そうすると先ほどのgulp_devディレクトリにpackage.jsonが作成されます。"ISC"}Gulpのインストール続いてはグローバル環境にGulpをインストールします。以下のコマンドを実行してください。gulpグローバル環境にインストールできたら、続いてはローカル環境にもインストールしていきます。(ちょっとややこしいですが、このようなものだと思ってください...)以下のコマンドを実行します。gulpこのコマンドは省略形があります。以下の省略形でも実行されますので、今後は以下のように記載します。gulpここで先ほどのpackage.jsonを確認すると、devDependecesにgulpが記載されています。}そしてnode_modulesというフォルダも作成されて、データが保存されます。このようにインストールを行ったものが–save-devによって自動的に記載されていきます。これによって他の作業者が環境を構築することを容易にしてるんですね。続いてはgulpfile.jsの作成を行います。このファイルを作成することによってgulpにどのような処理を行わせるのかを制御することができます。作成していきましょう。新規ファイルをpackage.jsonと同じディレクトリに作成します。以下を記述してgulpを呼び出し、扱えるように読み込みます。require("gulp");これでgulpが扱えるようになりました。基本的な設定はできましたので、CSSの圧縮を行う処理を追加してみたいと思います。例として以下のフォルダ構成にしてサンプルファイルなどを配置してみましょう。package.jsonsrcフォルダにはgulp実行前のデータを配置しています。style.cssには以下を記述してます。20px;}CSS圧縮用のプラグインインストールサンプル用のフォルダ構成ができましたら、続いてはプラグインをインストールしていきます。続いて実行させるタスクをgulpfile.jsに書き加えます。gulpfile.jsは以下のようになります。.pipe(gulp.dest('cssmin'));});記述し保存したらコマンドプロンプトから下記を実行。cssmindestフォルダが作成され、圧縮されたcssが出力されたでしょうか?フォルダが無い場合は自動的に作成してくれます。基本的には上記の手順で追加したいプラグインをどんどんインストールして、タスクをgulpfile.jsに記述していくことになります。gulpfile.jsの解説さきほどのgulpfile.jsへの編集を見てみましょう。←実行するタスクを登録。←実行させたいファイルを指定。←実行させたい処理を記述。←ファイルの出力先を指定。上記の記述をすることにより処理を実行します。※4行目のcss/*.cssという記述はcssフォルダ直下のすべてのcssファイルという指定。cssmin)を実行させる必要がありました。それだと面倒ですよね。Gruntではフォルダを監視させるためにはプラグインをインストールしなければいけませんでしたが、gulpではプラグインをインストールしなくてもデフォルトで実行させることが可能になってます。gulpfile.jsに以下の記述を行います。gulp.watch("src/css/*.css",["cssmin"]);});上記を追記するとgulpfile.jsは以下のようになります。cssminではなく、gulpとコマンド実行させてください。その後、cssファイルを修正してみてください。いかがですか?修正をして保存を実行するとcssminが自動的に実行されましたね!これはとても便利。cssminではなくgulpとするだけで実行できるように簡略化をしました。←実行させる元ファイルの指定と実行タスクを記述この処理は必須ですね。基本的なことはできましたので、次からは便利な機能などを簡単にご紹介します。cssのベンダープレフィックスを自動的に付与するsassやcompassでも対応可能ですが、gulpでもできます。require("gulp-autoprefixer");.pipe(autoprefixer())追記すると以下になります。gulp.watch("src/css/*.css",['cssmin']);});この状態で、ベンダープレフィックスが必要なものを記述してみてください。ベンダープレフィックスが付与されましたね!とても便利。エラーが起きてもwatchを止めない元ファイルに誤った記述をするとエラーが発生して監視状態が止まってしまいます。なると元ファイルを修正して再度コマンドを実行させなければなりません。そこでgulp-plumberをインストールします。require("gulp-plumber");.pipe(plumber())追記すると以下になります。gulp.watch("src/css/*.css",['cssmin']);});これでエラーが起きても監視状態が止まることはなくなりました。LiveReloadファイルに変更を加えてブラウザで確認するときに、毎回更新ボタンを押すのはちょっと手間ですよね。そこでブラウザの更新も自動化させちゃいましょう!browser-syncをインストールします。bold;}この状態でgulpを実行。すると自動的にブラウザが立ち上がりますね。cssの文字色などを編集して保存してみてください。保存すると自動的にブラウザが更新されて修正が反映しましたね!これは便利。さいごにまだまだgulpには便利なプラグインが多数あります。試してみて、自身のプロジェクトに利用できるかを確認してみてはいかがでしょうか。作業を効率化しちゃってください!!それでは、快適なフロントエンドライフを!Illustratorブレンドツールで影を利用したロゴ/アイコンの制作方法インフラ系女子、モニターを修理してみた。メルマガ(メールマガジン)の運用と配信やメールマ2016.04.13Gulpの使い方。Webデザイナーはるばる雪国、新潟から参上。服飾販売、ITサポートの仕事を経て現職へ。Webの世界でいる以上は、職種にとらわれずにいろんな知識を吸収したいです。スマホサイト制作にかかせないbackground-sizeについて5簡単作成!オリジナルのイラストなどのデザインQRコードを作ってみた。ー2014.12.24USB2.0とUSB3.0の見分け方(色、ケーブル、形などで2016.05.16bashでディレクトリを掘ったあと中に移動する2015.08.03第二種電気工事士への道【その2】2017.07.03電気工事士への道【完結編】2016.04.15Go-Nextインフラエンジニアが語る、自作PCへの熱い思い2014.07.21ほんのり解説Linux。InnoDBファイルフォーマットBarracud2017.09.06有給休暇の過ごし方が分からない。Go-Nextから新年のご挨拶2016.10.03人間に欠点なんてない2019.07.26現在リニューアル中。多忙につきお待たせしております。