I created a project with gulp js, installed bootstrap, browse-sync and sass.
My gulpfile.js file looks like this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
const sass = require('gulp-sass')(require('sass'));
gulp.task('sass', () => {
return gulp.src("./sass/*.scss")
.pipe(sass())
.pipe(gulp.dest("dist/"))
.pipe(browserSync.stream());
});
gulp.task('start', gulp.series('sass', function() {
browserSync.init({
server: "./"
});
gulp.watch("sass/*.scss", gulp.series('sass'));
gulp.watch("./*.html").on('change', browserSync.reload);
}));
gulp.task('default', gulp.series('start'));
When I use the Ctrl + S command in HTML and SCSS files, my project is saved and browser is reloaded; but I want to do this also for my JS files. Can you help me?
Very similar to the way you are dealing with your css, but you can use other plugins like terser to compress your javascript. Here is my js function which concatenates and minifies my javascript before reloading via browsersync
const concat = require('gulp-concat');
const terser = require('gulp-terser');
function js() {
return src(['./js/*.js'])
.pipe(concat('scripts.min.js'))
.pipe(terser())
.pipe(dest('js'))
.pipe(browsersync.stream());
}