こんにちは！
デザイナーのひろきちです！
最近は新しい技術などを業務に取り入れて効率化をはかろうと合間を見ては調べたりしてました。
そこでまず出てくるのは「gulp」です。
今回はこの「gulp」を使っていこうと思うのですがターミナルも使うので普段あまり使わないターミナルですがそれの慣れも含めてやっていきます。
環境はMacを使っていきます。
gulpとは
gulpは簡単にいえばタスク自動化ツールです。
CSS,JS,画像までも圧縮などしてくれるNode.jsを使った便利なものです
これと一緒に「grant」なども良く聞きますが、こっちのほうが良いらしいので今回は「gulp」を使っていきます。
Node.jsをインストール
ますは下記リンクからNode.jsをインストール。
これがないと始まりません。
2分ほどできました。
パッケージ管理
次はパッケージ管理できるように準備をします。
同じ環境を別のところでも作れるようにするためっぽいです。
デスクトップにディレクトリを作ります。
名前は「gulptest」としておきました。
できたらMacならターミナルを立ち上げ、さっき「gulptest」を作ったディレクトリに移動します。
cd desktop/gulptest
できたら以下を実行
npm init
すると何個か質問されますのでこう答えました。
{
"name": "gulptest",
"version": "1.0.0",
"description": "gulpのテストだよ",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "hirokichi",
"license": "ISC"
}
とりあえずこれでyesと入力すればOK。
デスクトップに作ったgulptestにpackage.jsonが作られていると思います。
gulp.jsをインストール
gulp.jsをインストールします。
以下のコマンドを実行。
npm install gulp -g
root権限での実行が必要です。
ローカルにもインストールします。
sudo npm install gulp --save-dev
gulpの設定
次に設定をしていきます。
package.jsonと同じディレクトリにgulpfile.jsを作成し、
以下のコードを書きましょう。
var gulp = require("gulp");
これで「gulp」とコマンドで打つとタスクが実行します。
プラグインを追加
gulpには便利なプラグインがたくさんあります。
今回はSassをコンパイルしてくれるプラグインをインストールしてみます。
まずは手動でgulptestにcss/style.scssを作ります。
h1 {
color: red;
&:hover {
color: blue;
}
}
次にプラグインをインストール。
npm install --save-dev gulp-cssmin gulp-rename
できたらgulpfile.jsに以下のコードを書きます。
var gulp = require('gulp');
var sass = require('gulp-sass');
// Task
gulp.task('sass', function() {
gulp.src("css/style.scss")
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./css'));
});
// Watch
gulp.task('watch', function() {
gulp.watch('_scss/style.scss', ['sass'])
});
gulp.task('default', ['sass','watch']);
コマンドでタスクを実行。
gulp
cssの中にコンパイルされたstyle.cssが自動生成されていれば成功です。
まとめ
今回はsassをコンパイルするプラグインしか紹介しませんでしたが他にも便利なプラグインがあります。
便利なものがあればまた紹介しようと思います。
目指せ！業務爆速化！
参考サイト
http://www.webcreatorbox.com/tech/gulp/
http://liginc.co.jp/web/tutorial/117900
