Suggestion for more integration with ES6

[reece-barker]

Hi, I think adapting your gulpfile.js like I have done in the files attached will be better for more use cases as my of us particularly me use alot of ES6 syntax and operators and working with older version of JS for the components is harder. I have attached files on my gulpfile.js which will show you what to do that enables ES6 compiling. (Ignore the nodemon section that is just a custom thing). Thanks :) (Let me know if you need any help working with gulp I know the compiling is great but they havent expanded the tool very well with JS ;) )

// FOUND THE DISCUSSIONS PAGE AND I MOVED IT SINCE I DONT WANT THIS AS AN ISSUE...

const gulp = require('gulp');

const fs = require('fs');

const scss = {
    sass: require('gulp-sass'),
    glob: require('gulp-sass-glob')
}

const css = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssvariables = require('postcss-css-variables');
const csscalc = require('postcss-calc');

const concat = require('gulp-concat');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');

const livereload = require('gulp-livereload');
const nodemon = require('nodemon');
const browserify = require('gulp-browserify');

const directories = {
    views: [
        "views/*.hbs",
        "views/**/*.hbs"
    ],
    js: [
        "private/assets/js",
        {
            tools: "private/assets/js/tools/*.js",
            utils: "private/assets/js/utils/*.js",
            dir: "private/assets/js/.dir"
        }
    ],
    scss: [
        "private/assets/scss",
        {
            tools: "private/assets/scss/tools/*.scss",
            utils: "private/assets/scss/utils/*.scss",
            dir: "private/assets/scss/.dir"
        }
    ]
}

gulp.task('scss', () => {
    return gulp.src([directories.scss[1].tools, directories.scss[1].utils])
        .pipe(scss.glob())
        .pipe(scss.sass({
            outputStyle: 'compressed'
        }).on('error', scss.sass.logError))
        .pipe(css([autoprefixer()]))
        .pipe(rename('~css.css'))
        .pipe(gulp.dest(directories.scss[1].dir))
        .pipe(livereload())
        .pipe(rename('~css.min.css'))
        .pipe(css([cssvariables(), csscalc()]))
        .pipe(gulp.dest(directories.scss[1].dir));
});

gulp.task('js', () => {
    return gulp.src([directories.js[1].tools, directories.js[1].utils])
        .pipe(browserify({
            transform: ['babelify'],
        }))
        .pipe(concat('~js.js'))
        .pipe(gulp.dest(directories.js[1].dir))
        .pipe(livereload())
        .pipe(rename('~js.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(directories.js[1].dir))
        .pipe(livereload());
});

gulp.task('watch', gulp.series(['scss', 'js'], () => {
    livereload.listen();

    nodemon({
        script: '~js.js',
        stdout: true
    }).on('readable', () => {
        this.stdout.on('data', (chunk) => {
            if (/^listening/.test(chunk)) {
                livereload.reload();
            }

            process.stdout.write(chunk);
        });
    });

    gulp.watch([directories.views[0], directories.views[1]], livereload());
    gulp.watch([directories.scss[1].utils, directories.scss[1].tools], gulp.series(['scss']));
    gulp.watch([directories.js[1].utils, directories.js[1].tools], gulp.series(['js']));

}));

[claudia-romano]

Hi there, thanks for the suggestion. We'll look into it!