東京上野のWeb制作会社LIG仕事も遊びもいいオフィス。フロントエンドシェア(編集部注*2014年9月18日に公開された記事を再編集したものです。)先日ランサーズさん主催の「週末ランサーズ」に登壇させていただきました、フロントエンジニアのハカセです。偶然にもTV取材が入っているという状態でハンズオンな勉強会をすることになり超緊張しました。以下がそのときのスライドです。Yuichi勉強会はハンズオンだったため、資料だけでは伝わらない内容を、今回のブログで補っていきたいと思います。エラー時にwatchを止めないまとめGulpとはNode.jsのStreamAPIを利用したビルドシステムです。http://gulpjs.com/Gruntとの違いまとめると、以下のようになります。Gruntのプラグイン普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。Gruntとの比較Gruntと比較してのメリット・デメリットは以下のようになります。メリットGruntより設定ファイルが記述しやすいStreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコデメリット記述がよりNodeに近くなるため、複雑なことは敷居がやや高めプラグイン開発のためのドキュメントが少ない今日のゴールGulp.jsを使ってコーディング作業を10倍速くする!そんな環境を作りたいと思います。Node.jsをインストールまずはNode.jsをインストールしましょう。Node.jshttp://nodejs.org/INSTALLをクリックしてインストーラーをDLし、インストーラーを起動してインストールします。※他にもいろいろなインストール方法がありますが、今回はもっとも簡単な方法にしました。わかる人はbrewとか使うと良いと思います。以外、ターミナル)を起動し、以下のコマンドを実行します。-vバージョン番号が表示されれば無事にインストール完了です。続いて、パッケージを管理するための準備をおこないます。これにより、同じ環境をすぐに別でも構築できるようになります。任意のところにディレクトリを作成し、ターミナルで作成したディレクトリへ移動します。今回はDocuments/blogtestというディレクトリを作りました。Documents/blogtest移動したら以下のコマンドを実行します。initすると以下のように質問が続きますので、任意の値を入力します。(yes)ただ使うだけならEnterを押すだけでOKです。これらの設定は後で変更することができます。すべて入力するとpackage.jsonが作られ、先ほど入力内容が記載されます。Gulp.jsをインストール次にGulpをインストールしていきます。以下のコマンドでGulpをインストールできます。npm〜としてください。--save-devGulpをローカルにもインストールします。–save-devとつけることで、このパッケージを開発用パッケージとしてインストールすることができます。package.jsonを見るとdevDependecesにGulpが記載されています。installというコマンドを実行するだけでインストールすることができます。package.jsonがあれば、いつでも必要なパッケージがすぐにインストールできます。準備も整ったので、Gulpの設定をおこなっていきましょう。gulpfile.jsをpackage.jsonと同じディレクトリに作成し、以下のように記述してGulpを呼び出します。require("gulp");これでgulpを使う準備ができました。次のページSassのコンパイルをしてみましょう。ANALYZE」を導入後、CVR改善に成功した品川美容外科のWeb担当者に話を聞いてきた。2019.12.31281年末年始のイマこそ!マーケティングを学びたい人必見・Udemyおすすめ動画講座5選【1/9まで新春セール実施中!】2019.12.2525130歳独身彼女なし。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。