gulpfile.js 例

var gulp = require(“gulp”);
var sass = require(“gulp-sass”);
var autoprefixer= require(“gulp-autoprefixer”); //ベンダープレフィックス
var notify = require(‘gulp-notify’); //エラーをデスクトップに通知
var plumber = require(‘gulp-plumber’); //エラーでタスクをこけさせない
var csscomb = require(“gulp-csscomb”);
var browserSync = require(“browser-sync”); //ブラウザ閲覧
var sourcemaps = require(‘gulp-sourcemaps’);
/*********************************************************************
* taskの定義
*********************************************************************/

gulp.task(“sass”, function() {
gulp.src(“common/sass/**/*scss”) //元となるscssファイル
.pipe(sourcemaps.init())
.pipe(plumber({
errorHandler: notify.onError(“Error: <%= error.message %>“)
}))
.pipe(sass())
.pipe(autoprefixer())
.pipe(csscomb())
.pipe(sourcemaps.write())
.pipe(gulp.dest(“common/css”)); //吐き出し先のcssファイル
});

/**
* browserSyncTask
* ブラウザサーバー設定
**/
gulp.task(“browserSyncTask”, function() {
browserSync({
server: {
baseDir: “./”, //ドキュメントルートを指定
}
});
});
gulp.task(“reload”, function() {
browserSync.reload(); //
});

gulp.task(‘watch’, function() {
gulp.watch(‘common/sass/**/*scss’, [‘sass’ , ‘reload’])
// browserSync.reload(); //
});

/**
* Watch JavaScript >> reload
* gulp.watch(‘監視対象ファイル’, [‘実行タスク’])
* 監視対象ファイルに変化があった場合に、gulp.taskを実行
**/
gulp.task(‘watch-js’, function() {
gulp.watch(‘common/js/**/*.js’, [‘reload’])
});
gulp.task(‘watch-html’, function() {
gulp.watch(‘**/*.html’, [‘reload’])
});

gulp.task(‘watch-php’, function() {
gulp.watch(‘**/*.php’, [‘reload’])
});

// Watch css>csscomb
gulp.task(‘css’, function() {
gulp.watch(‘common/css/**/*.css’, [‘csscomb’])
});

gulp.task(“csscomb”, function() {
gulp.src(“common/css/**/*css”)
.pipe(csscomb())
.pipe(gulp.dest(“./common/css”));
});

gulp.task(‘default’, [‘sass’, ‘watch’, ‘browserSyncTask’, ‘watch-js’, ‘watch-html’]);

カテゴリー: gulp

コメントを残す