BLOG
gulpfile.jsの設定
2015/9/8
最近使っているgulpfile.jsの設定は下記のような感じです。
もろもろのインストール等はここでは省略しています。
HTML/CSS/JavaScript・Sass/Compass・CoffeeScript等のファイル更新監視、httpサーバ、ブラウザ自動更新が実行されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
var gulp = require("gulp"); var compass = require('gulp-compass'); var coffee = require('gulp-coffee'); var connect = require('gulp-connect'); var watch = require('gulp-watch'); // ディレクトリ設定 var dir = { src: 'sample', } // Compassの設定 gulp.task('compass', function() { return gulp.src( dir.src + '/{,**/}*.scss' ) .pipe(compass({ css: dir.src + '/css/', sass: dir.src + '/sass/' })); }); // CoffeeScriptの設定 gulp.task('coffee', function() { return gulp.src( dir.src + '/coffee/*.coffee' ) .pipe(coffee()) .pipe(gulp.dest(dir.src + '/js/')); }); // サーバー gulp.task('connect', function() { return connect.server({ port: 8000, // ポート番号を設定 root: dir.src, // ルートディレクトリの場所を指定 livereload: true // ライブリロードを有効にする }); }); // 自動更新 gulp.task('reload', function () { return gulp.src(dir.src + '/{,**/}*.html') .pipe(connect.reload()); }); // ファイル更新監視 gulp.task('watch', function() { // scssの監視 gulp.watch([ dir.src + '/{,**/}*.scss' ],['compass']); // coffeeの監視 gulp.watch([ dir.src + '/{,**/}*.coffee' ],['coffee']); gulp.watch([ dir.src + '/{,**/}*.html', dir.src + '/{,**/}*.css', dir.src + '/{,**/}*.js' ],['reload']); // 実行タスク（scss ファイル以外が更新されたタイミングでブラウザを自動更新） }); gulp.task('default',['compass','coffee','connect','watch']); |
Tag:gulp JavaScript