Gulpの知識 -- 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のライブラリやパッケージを管理することができるツール
参考