Estoy tratando de crear un gulpfile.js para compilar scss a css y componentes JS en un archivo JS principal. Pero no está funcionando correctamente.
Los problemas a los que me enfrento cuando ejecuto el comando gulp :
Aquí está mi gulpfile.js:
"use strict"; const source = 'assets/'; // Load Modules const { src, dest, watch, series } = require('gulp'); const sass = require('gulp-sass')(require('sass')); const postcss = require('gulp-postcss'); const cssnano = require('cssnano'); const terser = require('gulp-terser'); const browsersync = require('browser-sync').create(); // Scss Task function scssTask() { return src(`${source}/scss/zaincss.scss`) .pipe(sass()) .pipe(postcss([cssnano()])) .pipe(dest(`${source}/css`)); } // Javascript Task function jsTask() { return src(`${source}/js/scripts/*.js`) .pipe(terser()) .pipe(dest(`${source}/js/scripts/`)); } // BrowserSync Tasks function browserSyncServe(done) { browsersync.init({ server: { baseDir: '.' }, injectChanges: true }); done() } function browserSyncReload(done) { browsersync.reload(); done(); } // Watch Task function watchTask() { watch('*.html', browserSyncReload); watch(['assets/scss/**/*.scss', 'assets/js/**/*.js'], series(scssTask, jsTask, browserSyncReload)); } // Default Gulp Task exports.default = series( scssTask, jsTask, browserSyncServe, watchTask );He buscado mucho en Google, pero estoy atascado. Por favor, ayúdame.
Parte del problema es que está viendo el mismo directorio en el que está almacenando sus archivos js :
// Javascript Task function jsTask() { return src(`${source}/js/scripts/*.js`) .pipe(terser()) .pipe(dest(`${source}/js/scripts/`)); } Entonces, envía los archivos a ${source}/js/scripts/ pero está observando esa ubicación en su tarea de watch : 'assets/js/**/*.js' . Entonces, cualquier cambio en esa ubicación inicia el proceso nuevamente.
Almacene sus archivos js minificados en otro lugar que no sea el mismo directorio que está buscando cambios.