0

プロジェクトで Gulp を使用していますが、次の 2 つの問題に気付きました。

  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 Plugin とNiceSelect Pluginを使用しています。それらはビルドタスクに含まれていないようです。本番環境では、検証も選択も機能しません。これは、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