yuheijotaki.com

gulp.js

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’]);
});

 
 
 

◯もっと

 
 
 

◯参考
主にLIGさんの参考にしました。