お問い合わせティーエスフォートブログ千葉で集客ホームページ制作はティーエスフォートブログgulp.jsを使ってWEB制作を高速化させよう【導入編】gulp.jsを使ってWEB制作を高速化させよう【導入編】お久しぶりです。最近はPS4版の【進撃の巨人】をプレイしているせいか、通勤を壁外調査と勝手に呼ぶようになりました。原作も80話ということで4月まで楽しみに待っています。そんなことはさておき今回も【gulp.jsを使ってWEB制作を高速化させよう】ということで以前に書いた記事の続きとなります。gulp.jsは現在のWEB制作でもかなり人気の高いビルドヘルパーです。導入してみてくださいね。Node.jsをインストールこちらのサイトからNode.jsをインストールします。gulp.jsはNode.jsのStreamAPIを利用したビルドヘルパーですのでNode.jsがないと話になりません。今回はNode.jsについての説明は行いませんが、詳しく知りたい方は本体の公式サイトを参照してください。インストールが完了したらWindowsならコマンドプロンプト、MacならターミナルでNodeのバージョンを確認してください。-v無事にバージョンが表示されたら大丈夫です。ModulesはNode.jsのライブラリやパッケージを管理することができるツールを指します。Windowsならコマンドプロンプト、Macならターミナルでgulpの環境づくりをはじめます。ディレクトリ名/ディレクトリ名こんな感じでディレクトリの移動をしていきます。Macだとcdの後にフォルダをドロップすれば移動できます。慣れていないと恐いですが、巨人の恐怖に比べればどうってことありません。次にnpmを導入します。Windowsならコマンドプロンプト、Macならターミナルで以下のコマンドを打ち込みます。initこれで準備完了です。gulpを準備する次にgulpを準備します。Windowsならコマンドプロンプト、Macならターミナルで以下のコマンドを打ち込みます。注意:Macの方は冒頭に【sudo】といれてください。–save-devちなみに【–save-dev】をつけることでパッケージを開発用パッケージとしてインストールすることができます。Macの方はパスワードを要求されますのでMacアカウントのパスワードを入力してください。色々な文章が出て来たら、今回はとりあえず【ENTER】を連打してください。gulpfile.jsを準備するgulpfile.jsをpackage.jsonと同じディレクトリに作成し、以下のように記述します。require(“gulp”);次にSASSをコンパイルするために以下のnpmを準備します。–save-devこれでgulpでSASSをコンパイルできます。gulpfile.jsにその指示を書かねばなりません。いうことで追記していきます。require(“gulp”);の下あたりに下記のような記述を行います。require(“gulp-sass”);次はその下の行あたりに下記のような記述をしていきます。{gulp.src(“sass/**/*scss”).pipe(sass()).pipe(gulp.dest(“./css”))});このように記述することで、ディレクトリ内の【sassフォルダ】の中にある【.scssファイル】を【cssフォルダ】内にコンパイルすることになります。実際コンパイルするにはどうしたらいいでしょうか?毎回コンパイルするのにコマンドを打ち込むのが面倒なので自動監視させましょう。ファイルを自動監視するWindowsならコマンドプロンプト、Macならターミナルで以下のコマンドを打ち込みます。{gulp.watch(“sass/**/*.scss”,[“sass”]);});gulp.taskを【default】とすることでファイルが変更される度に自動でコンパイルされるようになります。gulpを実行するWindowsならコマンドプロンプト、Macならターミナルで以下のコマンドを打ち込みます。gulpこのコマンドを入力すればgulpがファイルの監視を始めてくれます。gulpのようなビルドヘルパーには多くのプラグインがあるのでこれを併用すればもっと便利になります。詳しくはこちらのサイトを読んでみてください。いかがでしたでしょうか?今回はWEB制作で人気なgulpの使い方を記載しました。皆さんも是非導入して楽しいgulpライフを送って下さいね。FAX:043-306-7102。