BLOG

ファイル変更の監視と自動更新を実装

gulpfile.js

const {src, dest, watch} = require('gulp');//ここ追加
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');

function icon(done){
    for(let size of sizes){
        let width = size[0];
        let height = size[1];
         src('./favicon.png')
            .pipe($.imageResize({
                width,
                height,
                crop: true,
                upscale: false
            }))
            .pipe($.imagemin())
            .pipe($.rename(`favicon-${width}×${height}.png`))
            .pipe(dest('./dist/images/icon'));
        }
        done();
    }

function styles(){
    return src('./src/sass/main.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass())
        .pipe($.postcss([
            autoprefixer({
                "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
                cascade: false
            })
        ]))
        .pipe($.sourcemaps.write('.'))
        .pipe(dest('./dist/css'));
}

//ここ追加
function startAppServer(){
    watch('./src/**/*.scss', styles);
}

exports.icon = icon;
exports.styles = styles;
exports.serve = startAppServer;//ここ追加

gulp serve実行

これで自動で監視を行いタスクを走らせることが出来る。

browser-syncというnode.jsで動くサーバーで動作確認を行えるようにする

変更があったときにブラウザシンクをリロードしてソースが反映されるような仕組みにする。

下記実行

yarn add browser-sync --dev

gulpfile.js

const {src, dest, watch} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');//ここ追加
const server =  browserSync.create();//ここ追加

function icon(done){
    for(let size of sizes){
        let width = size[0];
        let height = size[1];
         src('./favicon.png')
            .pipe($.imageResize({
                width,
                height,
                crop: true,
                upscale: false
            }))
            .pipe($.imagemin())
            .pipe($.rename(`favicon-${width}×${height}.png`))
            .pipe(dest('./dist/images/icon'));
        }
        done();
    }

function styles(){
    return src('./src/sass/main.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass())
        .pipe($.postcss([
            autoprefixer({
                "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
                cascade: false
            })
        ]))
        .pipe($.sourcemaps.write('.'))
        .pipe(dest('./dist/css'));
}

function startAppServer(){
//ここ追加
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    watch('./src/**/*.scss', styles);
//ここ追加
    watch('./src/**/*.scss').on('change', server.reload);

}

exports.icon = icon;
exports.styles = styles;
exports.serve = startAppServer;

gulp serve実行

ブラウザが立ち上がる。