gulpを触ってみました
◯導入
- node.jsのインストール
- npmの準備
デスクトップにフォルダ「test」作成し、ターミナルでtestディレクトリ移動。その後
npm init
で質問に対してエンターを続ける。
- gulp.jsのインストール
npm install -g gulp
グローバルにインストール
npm install gulp --save-dev
ローカルにインスール
testディレクトリにpackage.jsonが勝手につくられます。
・gulpfile.jsの作成
testディレクトリにgulpfile.jsを作成
◯いじる
- プラグインの追加
gruntほどはないにせよプラグインが多くあり、基本的にそれらをインストールしてgulpfile.jsに対象ファイルなどを指定していく。
例えばjsを圧縮するgulp-uglifyは
npm install gulp-uglify --save-dev
とターミナルで打ちインストール。
testディレクトリに「node_modules」フォルダが追加され、その中に「gulp-uglify」ファイルができる
- gulpfile.jsの編集
gulp.task('js', function() {
gulp.src('./common/common.js')
.pipe(uglify())
.pipe(gulp.dest('./common/common.min.js'))
});
- gulp.task… でタスクの登録
- gulp.src… で読み込みファイルの指定
- .pipe… で処理を
- .pipe(gulp.dest で…出力
といった感じ
読み込みファイルは拡張子だけ指定など、minimatchというライブラリを使ったりしてもっとできる
- タスクを行う
上記のjs圧縮は
gulp js
「default」タスクを作れば
gulp
でいける
◯gulpfile.js
var gulp = require('gulp');
//プラグイン
var browserSync = require('browser-sync');
var plumber = require("gulp-plumber");
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//ブラウザシンク
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: './'
,index : 'index.html'
}
});
});
//ブラウザリロード
gulp.task('bs-reload', function () {
browserSync.reload();
});
//sassコンパイル
gulp.task('sass', function() {
gulp.src('./sass/style.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('./'))
});
//js圧縮
gulp.task('js', function() {
gulp.src('./common/common.js')
.pipe(plumber())
.pipe(uglify())
.pipe(concat('common.min.js'))
.pipe(gulp.dest('./common'))
});
//デフォルトタスク $gulpで実行
gulp.task('default', ['browser-sync'], function () {
gulp.watch('./index.html',['bs-reload']);
gulp.watch('./sass/style.scss',['sass','bs-reload']);
gulp.watch(['./common/common.js','./common/common.min.js'],['js','bs-reload']);
});
◯もっと
- 最終的に必要なファイルのみ抽出
- config.rbでsass設定
- gulpでSass/Compass – Qiita
- » gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう | isee ウェブに関するブログ
◯参考
主にLIGさんの参考にしました。