Gulpの知識 -- Web開発のタスクの自動化

Web
  • 画像の圧縮・SassやLESSのコンパイル・簡易ローカルサーバの立ち上げ・FTPアップロードなどなど、Web制作の面倒な作業を自動化してくれる


#数字はdotinstallに対応

  • フロントエンドのタスクの自動化
  • Gulp.jsを使うにはNode.jsが必要 #02
//install epel nodejs npm gulp
sudo yum -y install epel-release
sudo yum -y install nodejs npm

// グローバルのオプション付きでglupをインストール
sudo npm install gulp -g
// フォルダの中だけにインストールする
npm install --save-dev gulp
  • ファイル内の移動、圧縮などを自動化できる！
  • 命令は、"gulpfile.js"に記述する #05
  • 高速に並列に処理することができる #06
  • 処理の順番を指定することができる #06
  • イメージの最適化に関して　gulp-imagemin #07
  • タスクの名前を最初のパラメータに記述する #07
  • 圧縮の成果をconsoleを通して確認することができる #07
  • javascriptに変換する、結合方法、圧縮方法#08
  • プラグインのインストールの仕方 #08
  • jsに関するプラグイン　gulp-coffee ､gulp-concat､gulp-uglify #08
  • gulp.watch() 変更があれば、自動でタスクを実行するということができる #09
  • gulp-plumber watch()だと間違いがあると止まってしまう。それを解消するプラグインがある。エラーが出そうなところに記述する。エラーが表示されるとともに実行もされる #10
  • gulp-header　ヘッダープラグインに関して、メッセージを記述する。 #11　
  • gulp-webserver プラグイン、変換してものをすぐにブラウザに反映するということをするもの #12


用語
Node Packaged Modules(npm)とはNode.jsのライブラリやパッケージを管理することができるツール


参考