1

En mi proyecto estoy usando Gulp. Tengo dos problemas:

  1. No copia las imágenes a la carpeta dist. Estoy usando imagemin. Ya chequeé múltiples veces el directorio, pero no veo el error. Mis carpetas están organizadas de la siguiente manera:

    |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- jQuery Nice Select/ |- jQuery Validation/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

  2. Estoy usando el plugin Nice Select y jQuery Validate y parece no incluirlos en el build, ya que al ver la página en producción, el selectaparece como el default del explorador y las validaciones no funcionan.

HTML

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!--build:js js/main.min.js -->
    <script src="js/simulador.js"></script>         
    <script src="js/main.js"></script>
    <script src="https://www.google.com/recaptcha/api.js"></script>

    <script src="js/lib/jquery-validation-1.16.0/dist/jquery.validate.js"></script>
    <script src="js/lib/jquery-nice-select/jquery.nice-select.js"></script>
    <!-- endbuild -->

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var cssnano = require('gulp-cssnano');
var del = require('del');
var runSequence = require('run-sequence');
var debug = require('gulp-debug');


gulp.task('sass', function(){
    return gulp.src('app/scss/**/*.scss')
      .pipe(sass()) // Using gulp-sass
      .pipe(gulp.dest('app/css'))
      .pipe(browserSync.reload({
        stream: true
    }))
});

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
        baseDir: 'app'
        },
    })
});

gulp.task('useref', function(){
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpIf('*.js', uglify()))
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('dist'))
});

gulp.task('images', function(){
    return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
    .pipe(cache(imagemin({
        interlaced: true
    })))
    .pipe(gulp.dest('dist/images'))
});

gulp.task('fonts', function() {
    return gulp.src('app/fonts/**/*')
    .pipe(gulp.dest('dist/fonts'))
});

gulp.task('clean:dist', function() {
    return del.sync('dist');
});

gulp.task('watch', ['browserSync', 'sass'], function(){
    gulp.watch('app/scss/**/*.scss', ['sass']); 
    gulp.watch('app/*.html', browserSync.reload); 
    gulp.watch('app/js/**/*.js', browserSync.reload); 
});

gulp.task('build', function (callback) {
    runSequence('clean:dist', 
      ['sass', 'useref', 'images', 'fonts'],
      callback
    )
});

1 respuesta 1

0

Lo solucioné de la siguiente manera:

1) Tema imágenes:

gulp.task('images', function() {
    return gulp.src('app/images/**/*.+(png|jpg|gif|svg)')
        .pipe(imagemin(cache({
            interlaced: true
        })))
        .pipe(gulp.dest('dist/images'))
});

La solución radica en poner cache luego de imagemin. De la forma inversa no lo tomaba.

2) Tema plugins: De alguna extraña manera cssnano interfería con el minificado de los js. Cambié a cleanCSS y ahora todo funciona perfecto.

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.