javascript ejs gulp文件

Posted 2021-05-04

var gulp = require('gulp');
var fs = require('fs');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var jshint = require('gulp-jshint');
var notify = require('gulp-notify');
var plumber = require("gulp-plumber");
var ejs = require("gulp-ejs");
var browserSync = require('browser-sync');

// エラー通知
var onError = function (err) {
    notify({
         title: 'Gulp Task Error',
         message: 'Check the console.'
     }).write(err);

     console.log(err.toString());

     this.emit('end');
}

// sass lint
gulp.task('sass-lint', function() {
    return gulp.src('src/sass/**/*.s+(a|c)ss')
    .pipe(sassLint({
        options: {
            'merge-default-rules': false,
        },
        rules: {
            // インデントチェック
            'indentation': [
                1,
                {
                    'size': 4
                }
            ],
            // 省略可能な色指定の検知
            'hex-length': [
                1,
                {
                    'style': 'short'
                }
            ],
            // 無効なプロパティ検知
            'no-misspelled-properties': 1
        }
    }))
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError())
});

// sass
gulp.task('sass', function() {
    return gulp.src(['src/sass/**/*.scss'])
    .pipe(plumber({errorHandler: onError}))
    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('dest/css'))
    .on('end', function() {
        gulp.start('sass-lint');
        browserSync.reload();
    });
});

// ejs
gulp.task('ejs', function() {
    var data = JSON.parse(fs.readFileSync('src/ejs/data.json'));

    return gulp.src(['src/ejs/**/*.ejs', '!src/ejs/**/_*.ejs'])
    .pipe(plumber({errorHandler: onError}))
    .pipe(ejs({data: data}, {
        root: './src/ejs/'
    }, {ext:'.html'}))
    .pipe(gulp.dest('dest/html/'))
    .on('end', function() {
        browserSync.reload();
    });
});

// jshint
gulp.task('js', function() {
    return gulp.src('src/js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest('dest/js/'))
    .on('end', function() {
        browserSync.reload();
    });

})

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: 'dest/',
            index: 'html/index.html',
            serveStaticOptions: {
                extensions: ["html"]
            }
        },
        port: 3030,
        notify: true
        // ghostMode: {
        //     scroll: true
        // }
    });
});

// Reload all browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});

// watch
gulp.task('watch', ['sass', 'ejs', 'browser-sync'], function() {
    gulp.watch('./src/sass/**',  { ignoreInitial: false }, function() {
        gulp.start('sass');
    });

    gulp.watch('src/ejs/**', { ignoreInitial: false }, function() {
        gulp.start('ejs');
    });

    gulp.watch('src/js/**', { ignoreInitial: false }, function() {
        gulp.start('js');
    });
});

gulp.task('default', function() {
    gulp.start('watch');
});