内容

  • gulpと打つとローカルサーバーが立ち上がりファイル監視(watch)開始。自動リロード機能あり。
  • アンダースコア始まりの JavaScript ファイルを結合(concat)して圧縮(uglify)して app.min.js にする
  • sassはgulp-comassを利用。エラーになってもwatchを継続させるためにplumber入れてます。
  • js, sass に変更あったらブラウザ更新
  • Laravelのviews以下のphpファイルに変更あってもブラウザを更新
  • Laravel使ってるのでxamppの方へ串を通してます
  • //192.168.*.*:3000 が異なる端末間でブラウザ同期されます

インストール

npm install --save-dev gulp gulp-compass gulp-plumber gulp-uglify gulp-rename gulp-concat browser-sync

gulpfile.js

var gulp = require('gulp');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var browserSync = require('browser-sync');
var public = './public';

gulp.task('default', ['browser-sync', 'watch']);

// Watch
gulp.task('watch', function() {
    gulp.watch('./sass/**/*.scss', ['compass']);
    gulp.watch(public + '/js/_*.js', ['scripts']);
    gulp.watch('./app/views/**/*.php', ['html']);
});

// Script
gulp.task('scripts', function() {
    gulp.src(public + '/js/_*.js')
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(public + '/js'))
        .pipe(browserSync.reload({stream: true}));
});

// Compass
gulp.task('compass', function() {
    gulp.src('./sass/**/*.scss')
        .pipe(plumber())
        .pipe(compass({
            css: public + '/css',
            image: public + '/img'
        }))
        .pipe(browserSync.reload({stream: true}));
});

// HTML
gulp.task('html', function() {
    gulp.src('./app/views/**/*.php')
        .pipe(browserSync.reload({stream: true}));
});

// BrowserSync
gulp.task('browser-sync', function() {
    browserSync({
        proxy: 'localhost:8012'
    });
});