1

Acabo de migrar a gulp 4, realice la configuración y elabore el archivo gulpfile.js pero al momento de hacer el llamado gulp no realiza ninguna tarea. seguí un ejemplo de la siguiente página, en el vídeo funciona e hice el código muy similar. https://www.pixemweb.com/?p=2447

Este es mi código de mi gulpfile.js, lo he revisado con el modelo de la pagina, seguí los pasos pero no realiza ninguna tarea. Por favor si me pueden ayudar a identificar el problema.

// Variable de la carpeta de los assets.
var themename = 'assets';

// Declaración de las dependencias a utilizar en el archivo gulpfile.js
var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload,
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    imagemin = require('gulp-imagemin'),
    changed = require('gulp-changed'),
    uglify = require('gulp-uglify'),
    debug = require('gulp-debug'),
    plumber = require('gulp-plumber'),
    htmlmin = require('gulp-htmlmin'),
    sitemap = require('gulp-sitemap');

// Rutas de carpetas principales.
var root = '../' + themename + '/',
    scss = root + 'sass/',
    js = root + 'src/js/',
    jsdist = root + 'dist/js/',
    cssdist = root + 'dist/css/';

// Observadores de tipos de archivos.
var phpWatchFiles = root + '**/*.php',
    styleWatchFiles = scss + '**/*.scss';

// Variable de archivos js. Los archivos deben de estar sin minificar y en orden jerárquico de acuerdo al archivo HTML.
var jsSRC = [
    js + 'modernizr-2.6.2-respond-1.1.0.min.js',
    js + 'jquery.min.js',
    js + 'jquery.plugin.min.js',
    js + 'bootstrap.min.js',
    js + 'jquery.flexslider-min.js',
    js + 'smooth-scroll.min.js',
    js + 'skrollr.min.js',
    js + 'spectragram.min.js',
    js + 'scrollReveal.min.js',
    js + 'isotope.min.js',
    js + 'twitterFetcher_v10_min.js',
    js + 'lightbox.min.js',
    js + 'jquery.countdown.min.js',
    js + 'js/scripts.js'
];

// Variable de archivos css. Los archivos deben de estar sin minificar y en orden jerárquico de acuerdo al archivo HTML.
var cssSRC = [
    root + 'src/css/bootstrap.min.css',
    root + 'src/css/elegant-icons.min.css',
    root + 'src/css/flexslider.min.css',
    root + 'src/css/lightbox.min.css',
    root + 'src/css/line-icons.min.css',
    root + 'src/css/theme.css',
    root + 'src/css/style.css'
];

// Rutas de la carpeta images (de src a dist).
var imgSRC = root + 'src/images/*',
    imgDEST = root + 'dist/images';

// Tareas

function htmlmin() {
    return gulp.src('*.html')
    .pipe(plumber())
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(debug({showFiles: true}))
    .pipe(gulp.dest([root + 'dist/']));
}

function sitemap () {
    return gulp.src('*.html', {
        read: false
    })
    .pipe(plumber())
    .pipe(sitemap({
        siteUrl: 'http://www.donamadorperu.com/'
    }))
    .pipe(debug({showFiles: true}))
    .pipe(gulp.dest(''));
}

function css() {
    return gulp.src([scss + 'style.scss'])
    .pipe(plumber())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sass({
        outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourcemaps.write())
    .pipe(debug({showFiles: true}))
    .pipe(gulp.dest([root + 'src/css']));
}

function concatCSS() {
    return gulp.src(cssSRC)
    .pipe(plumber())
    .pipe(sourcemaps.init({loadMaps: true, largeFile: true}))
    .pipe(concat('style.min.css'))
    .pipe(cleanCSS())
    .pipe(sourcemaps.write('./maps/'))
    .pipe(debug({showFiles: true}))
    .pipe(gulp.dest(cssdist));
}

function javascript() {
    return gulp.src(jsSRC)
    .pipe(plumber())
    .pipe(concat('dev.js'))
    .pipe(uglify())
    .pipe(debug({showFiles: true}))
    .pipe(gulp.dest(jsdist));
}

function imgmin() {
    return gulp.src(imgSRC)
    .pipe(plumber())
    .pipe(changed(imgDEST))
    .pipe(imagemin([
        imagemin.gifsicle({interlaced: true}),
        imagemin.jpegtran({progressive: true}),
        imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(debug({showFiles: true}))
    .pipe(gulp.dest(imgDEST));
}

function watch() {
    browserSync.init({
        open: 'external',
        proxy: 'http://localhost/proyectos/don_amador/don_amador/assets/dist',
        port: 8080,
    });
    gulp.watch('*.html', gulp.parallel(htmlmin, sitemap));
    gulp.watch(styleWatchFiles, gulp.series([css, concatCSS]));
    gulp.watch(jsSRC, javascript);
    gulp.watch(imgSRC, imgmin);
    gulp.watch([phpWatchFiles, jsdist + 'dev.js', scss + 'style.min.css']).on('change', browserSync.reload);
}

exports.htmlmin = htmlmin;
exports.sitemap = sitemap;
exports.css = css;
exports.concatCSS = concatCSS;
exports.javascript = javascript;
exports.watch = watch;
exports.imgmin = imgmin;

var build = gulp.parallel(watch);
gulp.task('default', build);

He revisado las rutas y están debidamente escritas, es un proyecto que había dejado en mi librería pero lo estoy empezando a trabajar por eso que instale gulp en archivos ya avanzados y minificados, no debería dar problema simplemente es que los concatene y los ponga en la carpeta dist. lo que quiero realizar es que mis tareas funcionen para mis proyectos futuros, puesto que la ultima actualización de gulp me agarro de sorpresa.

1 respuesta 1

1

tuve un problema similar y me estaba volviendo loco ya que veía que el código estaba todo bien, pero había un detalle que estaba ignorando, la nueva versión de gulp incluyo los métodos parallel y series el cual manejan las tareas como promesas, cuando tu defines una función que solo ejecuta código y no hace un return, al momento de incluir esta función como tarea a ejecutar ya sea en series() o parallel(), gulp necesita saber cuando termina, por lo que lo resolví agregándole un return de la siguiente forma:

function watch(done) {
browserSync.init({
    open: 'external',
    proxy: 'http://localhost/proyectos/don_amador/don_amador/assets/dist',
    port: 8080,
});
gulp.watch('*.html', gulp.parallel(htmlmin, sitemap));
gulp.watch(styleWatchFiles, gulp.series([css, concatCSS]));
gulp.watch(jsSRC, javascript);
gulp.watch(imgSRC, imgmin);
gulp.watch([phpWatchFiles, jsdist + 'dev.js', scss + 'style.min.css']).on('change', browserSync.reload);
  done();
 }

igual te dejo la referencia a la documentación gulp-doc-tasks, fíjate como las funciones tienen un parámetro, y luego devuelven ese parámetro en un return

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.