世の中のフロントエンドエンジニアたちは、もうGulp古いぜとか言いますけど、webpackよくわからないのでまだまだ現役です。
俺のGulpをメモします。
正直Gulpもよくわからないので、いろいろな人のものを継ぎ接ぎして使っています。
以下のものはWordpress開発のときに使っているものです。
スポンサードリンク
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 61 62 63 64 65 66 67 68 69 70 71 72 |
var gulp = require("gulp"); var sass = require("gulp-sass"); var sourcemaps = require('gulp-sourcemaps');//ソースマップ作成 var autoprefixer = require("gulp-autoprefixer");//これがないと俺は死ぬ // var frontnote = require("gulp-frontnote");//しっかり管理したい場合はこちら。 var browserSync = require("browser-sync");//ブラウザオートリロード var plumber = require("gulp-plumber");//エラーが起きても走り続ける var notify = require('gulp-notify');//エラーをデスクトップ通知 //var cssmin = require('gulp-cssmin');css圧縮。 //var rename = require('gulp-rename');css圧縮した物の名前を変える。 var sassGlob = require("gulp-sass-glob");//https://www.npmjs.com/package/gulp-sass-glob gulp.task("server", function() { browser({ server: { baseDir: "./" } }); }); gulp.task("sass",function(){ gulp.src("scss/style.scss") .pipe(sourcemaps.init()) .pipe(plumber()) // .pipe(frontnote({ // css: './style.css' // })) .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })) .pipe(sassGlob()) // Sassの@importにおけるglobを有効にする .pipe(sass()) .pipe(autoprefixer({ // ☆IEは9以上、Androidは4以上、iOS Safariは8以上 // その他は最新2バージョンで必要なベンダープレフィックスを付与する設定 browsers: ["last 2 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"], cascade: false })) // .pipe(sourcemaps.write("../maps/")) //圧縮系 .pipe(minifycss()) // .pipe(gulp.dest("./assets/css")) .pipe(sourcemaps.write('./')) .pipe(gulp.dest("./"))//吐出口 .pipe(browserSync.reload({stream:true})); }); gulp.task('browser-sync', function () { browserSync({ proxy: "http://example.dev/" }); }); gulp.task('bs-reload', function () { browserSync.reload(); }); gulp.task('default', ['browser-sync'], function () { gulp.watch("scss/**/*.scss", ['sass']); gulp.watch("*.php", ['bs-reload']); }); //圧縮を使うなら // gulp.task('cssmin', function () { // gulp.src('stylesheets/*.css') // .pipe(cssmin()) // .pipe(rename({suffix: '.min'})) // .pipe(gulp.dest('cssmin')); // }); |
静的サイトを作るときは、カヤック様のを丸パクリして使わせていただいております。
(ルートディレクトリ以外で作る場合どうすればいいのかすらわかってないんですけどね…)