https://qiita.com/mzzzk/items/bb15c38d47c2471da5c1
https://www.webcreatorbox.com/tech/gulp
カテゴリー: gulp
Browsersync の起動を早くする
- Browsersync の起動を早くする
http://qiita.com/ngyuki/items/4bfdf34ac00b61751e27 - Vagrant ブラウザの自動更新。
https://medium.com/@amano7/5-vagrant-%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E8%87%AA%E5%8B%95%E6%9B%B4%E6%96%B0-ee80b1a1eb6b - BrowserSyncはLiveReloadより手軽で便利
http://nantekottai.com/2015/03/23/browser-sync/ - Gulpでpugのコンパイルを100倍早くするちょっとしたテク
http://marunouchi-tech.i-studio.co.jp/3211/
- Browsersync で快適なブラウザチェック環境を作る
http://www.ingsnet.co.jp/igblog/htmlcss/2948/
gulpで出力元のディレクトリ構造を保ったまま出力する方法
https://teratail.com/questions/3757
Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境
https://hyper-text.org/archives/2018/03/gulp_quick_start.shtml
gulp-sass + BrowserSyncでコーディングする際の gulpfile メモ
オレオレ設定
- https://tombolo.jp/2017/06/659
- GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする
https://qiita.com/KazuyoshiGoto/items/8b788279490a6dd006d9 - GulpとBrowsersyncを使ってSassを快適に書く環境を構築する
http://naremo.jp/2016/11/sass-compile/
説明付き
【Gulp.jsインストール】フロントエンドタスクランナーGulp.jsの使い方
gulp:ディレクトリ・ファイル構成を維持してdestする
Sass用のソースマップを作成してコーディング作業を更にもっと爆速化だ!【Gulp Sass向け】
gulpのファイル構成やgulpfile.jsを公開。
http://www.pccinc.jp/2016/07/08/844/
gulp generator
作業効率UP タスクランナーGulp
http://suckamon.com/web/2015/08/gulp/
めちゃ簡潔
タスクランナーGulpでWeb制作を効率化しよう
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」 を使って制作時間を短縮しよう
Web制作に便利そうな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入門その1―とりあえず動かすところまで
使い方
http://qiita.com/naoiwata/items/4c82140a5fb5d7bdb3f8
Gulp でタスクを並列/直列処理する
複数のタスクを順序立てて実行する
http://qiita.com/nekoneko-wanwan/items/f947e8f505aa3869447b
静的サイト開発でよく使うgulpfileスニペット(初心者向け)
gulp入門その3―こまごま便利なこと
タスクランナー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 を使う
http://nantekottai.com/2015/03/23/browser-sync/
BrowserSyncはLiveReloadより手軽で便利
http://qiita.com/niusounds/items/a95978f9a1cb328d3021
BrowserSyncの使い方
めっちゃうれしい!GulpでWordPressのテーマ開発はここまで効率化できた
おまけ
CSScomb公式
http://csscomb.com/