is there a possibility to trigger gulps tasks only when file changes? Right now my script runs into infinity loop when I try to use gulp-beautifier and my sass method (in code bundleSass) function. What I'm trying to achieve is to format my source code, then transpile it from scss to css code into public folder (and same thing with js in the future).
const compileSass = require('gulp-sass')(require('node-sass'));
const minifyJs = require('gulp-uglify');
const autoprefixer = require('gulp-autoprefixer');
const minifyCss = require('gulp-clean-css');
const concat = require('gulp-concat');
const beautify = require('gulp-jsbeautifier');
const bundleSass = () => {
return src(['./resources/sass/**/*.scss'])
.pipe(compileSass().on('error', compileSass.logError))
.pipe(autoprefixer())
.pipe(minifyCss())
.pipe(concat('styles.css'))
.pipe(dest('./public/'));
}
const bundleJs = () => {
return src('./resources/js/**/*.js')
.pipe(minifyJs())
.pipe(concat('bundle.js'))
.pipe(dest('./public/'));
}
const copyHtml = () => {
return src('./resources/html/**/*.html')
.pipe(dest('./public/'))
}
const beautificationScss = () => {
return src('./resources/sass/**/*.scss')
.pipe(beautify())
.pipe(dest('./resources/sass/'))
}
const run = () => {
watch(['./resources/sass/**/*.scss'], beautificationScss)
watch(['./resources/sass/**/*.scss'], bundleSass)
watch(['./resources/js/**/*.js'], bundleJs);
watch(['./resources/html/*.html'], copyHtml);
}
exports.copyHtml = copyHtml;
exports.bundleJs = bundleJs;
exports.bundleSass = bundleSass;
exports.run = run;
exports.beautificationScss = beautificationScss;```