カテゴリー: gulp

Browsersync の起動を早くする

コメントする

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入門

コメントする

インストール

タスク自動化ツール「gulp」 を使って制作時間を短縮しよう


タスク自動化ツール「gulp」 を使って制作時間を短縮しよう

Web制作に便利そうなGulp.jsのプラグインをインストールしてみる


Web制作に便利そうなGulp.jsのプラグインをインストールしてみる

gulp.js を今一度キチンと！gulp.js 導入基礎


gulp.js を今一度キチンと！gulp.js 導入基礎

gulp-sassで自動でSass/SCSSからcssファイルを生成したり、他にもいろいろする
http://www.ezgate-mt.sakura.ne.jp/css/162.html
設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」

minimatch（node.js で path match するライブラリ）のチートシートを作った

gulp入門その１―とりあえず動かすところまで


gulp入門その１―とりあえず動かすところまで

使い方

http://qiita.com/naoiwata/items/4c82140a5fb5d7bdb3f8
Gulp でタスクを並列/直列処理する

gulpの基本的な使い方（gulp.jsの基礎をしっかり理解する）


複数のタスクを順序立てて実行する
http://qiita.com/nekoneko-wanwan/items/f947e8f505aa3869447b
静的サイト開発でよく使うgulpfileスニペット（初心者向け）

gulp入門その３―こまごま便利なこと


gulp入門その３―こまごま便利なこと

タスクランナーgulp.js最速入門

Gulp concatでファイルをまとめて、uglifyでmin化してファイル名を変更して出力したい。

gulp-watch + gulp-notify + browser-sync で開発効率アップを図る – Gulp で作る Web フロントエンド開発環境 #2


gulp-watch + gulp-notify + browser-sync で開発効率アップを図る – Gulp で作る Web フロントエンド開発環境 #2

gulp で BrowserSync を使う


gulp で BrowserSync を使う
http://nantekottai.com/2015/03/23/browser-sync/
BrowserSyncはLiveReloadより手軽で便利
http://qiita.com/niusounds/items/a95978f9a1cb328d3021
BrowserSyncの使い方

めっちゃうれしい！GulpでWordPressのテーマ開発はここまで効率化できた


めっちゃうれしい！GulpでWordPressのテーマ開発はここまで効率化できた

おまけ

CSScomb公式
http://csscomb.com/