In my project I am using Gulp. I have two problems:
Do not copy the images to the dist folder. I am using imagemin . I have already checked the directory multiple times, but I do not see the error. My folders are organized as follows:
|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- jQuery Nice Select/
|- jQuery Validation/
|- scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json
I am using the Nice Select plugin and jQuery Validate and it seems not to include them in the build, since when viewing the page in production, the select it appears as the default of the browser and the validations do not work.
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
)
});