0

我在一个项目中使用 Gulp 并注意到两个问题：

  1. 图像未复制到dist文件夹中。我正在imagemin这样做，但图像文件夹根本没有构建。我多次检查文件夹的根目录，但似乎找不到错误。这是我的文件夹组织：

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

  1. 我正在使用jQuery Validate插件和NiceSelect插件。它们似乎没有包含在构建任务中。在生产中，验证不起作用，选择也不起作用，因为它看起来像 Chrome 呈现的。

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
    )
});
4

0 回答 0