javascript GULP，scss，es6，babel，browserify

Posted 2021-05-03

var babelify = require('babelify');
var browserSync = require('browser-sync');
var browserify = require('browserify');
var buffer = require('vinyl-buffer');
var gulp = require('gulp');
var plugins = require('gulp-load-plugins');
var source = require('vinyl-source-stream');

/* Configuration */
var config = {
    filename: 'my-awesome-app',
    src: {
        scss: './src/scss/**/*.scss',
        js: './src/scripts/**/*.js',
        jsEntry: './src/scripts/main.js'
    }
};

/* Development */
gulp.task('development', ['scripts', 'styles'], () => {
    browserSync({
        'server': './',
        'snippetOptions': {
            'rule': {
                'match': /<\/body>/i,
                'fn': (snippet) => snippet
            }
        }
    });

    gulp.watch(config.src.scss, ['styles']);
    gulp.watch(config.src.js, ['scripts']);
    gulp.watch('./*.html', browserSync.reload);
});

/* Scripts */
gulp.task('scripts', () => {
    return browserify({
        'entries': [config.src.jsEntry],
        'debug': true,
        'transform': [
            babelify.configure({
                'presets': ['env']
            })
        ]
    })
    .bundle()
    .on('error', function () {
        var args = Array.prototype.slice.call(arguments);

        plugins().notify.onError({
            'title': 'Compile Error',
            'message': '<%= error.message %>'
        }).apply(this, args);

        this.emit('end');
    })
    .pipe(source(config.filename +'.js'))
    .pipe(buffer())
    .pipe(plugins().sourcemaps.init({'loadMaps': true}))
    .pipe(plugins().sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/js/'))
    .pipe(browserSync.stream());
});

/* Styles */
gulp.task('styles', () => {
    return gulp.src(config.src.scss)
        .pipe(plugins().sourcemaps.init())
        .pipe(plugins().sass().on('error', plugins().sass.logError))
        .pipe(plugins().sourcemaps.write())
        .pipe(plugins().autoprefixer())
        .pipe(plugins().rename(config.filename +'.css'))
        .pipe(gulp.dest('./dist/css/'))
        .pipe(browserSync.stream());
});

/* Cssmin */
gulp.task('cssmin', () => {
    return gulp.src(config.src.scss)
        .pipe(plugins().sass({
            'outputStyle': 'compressed'
        }).on('error', plugins().sass.logError))
        .pipe(plugins().rename(config.filename +'.min.css'))
        .pipe(gulp.dest('./dist/css/'));
});

/* Jsmin */
gulp.task('jsmin', () => {
    var envs = plugins().env.set({
        'NODE_ENV': 'production'
    });

    return browserify({
        'entries': [config.src.jsEntry],
        'debug': false,
        'transform': [
            babelify.configure({
                'presets': ['env']
            })
        ]
    })
    .bundle()
    .pipe(source(config.filename +'.js'))
    .pipe(envs)
    .pipe(buffer())
    .pipe(plugins().uglify())
    .pipe(envs.reset)
    .pipe(plugins().rename(config.filename +'.min.js'))
    .pipe(gulp.dest('./dist/js/'));
});

/* Taks */
gulp.task('default', ['development']);
gulp.task('deploy', ['cssmin', 'jsmin']);