Question

我和Gulp还是比较新的所以请耐心等待。我目前有一个Angular应用程序和Gulp的构建任务。

我将其设置为保留我的文件夹结构并将html文件复制到生成版本的dist文件夹。我的角度应用程序连接和缩小，一切都按预期工作，除了我的图像。我的svg，json等也正在被正确复制。

我的图片被复制到正确的文件夹中，但它们已损坏且无法显示。

以下是我gulpfile的相关部分。任何帮助表示赞赏。

var gulp        = require('gulp');
var del         = require('del');
var less        = require('gulp-less');
var useref      = require('gulp-useref');
var ngAnnotate  = require('gulp-ng-annotate');
var uglify      = require('gulp-uglify');
var gulpIf      = require('gulp-if');
var cssnano     = require('gulp-cssnano'); 

gulp.task('build', ['clean:dist'], function() {
    return gulp.src(['src/**/*.{html,svg,png,jpg,gif,css,json}'], {
            base: 'src'
        }).pipe(useref())
        .pipe(gulpIf('*.js', ngAnnotate()))
        .pipe(gulpIf('*.js', uglify()))
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('dist'));
});

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

Answer 1

gulp-useref corrupts binary files

我首选的方法是为不同类型的文件使用单独的任务。例如：

gulp.task('build-js', function(){
        return gulp.src(['src/**/*.js'], {base: 'src'})
                .pipe(ngAnnotate())
                .pipe(uglify())
                .pipe(gulp.dest('dist'))
        ;
});

gulp.task('build-css', function(){
        return gulp.src(['src/**/*.css'], {base: 'src'})
                .pipe(cssnano())
                .pipe(gulp.dest('dist'))
        ;
});

gulp.task('build-html', function(){
        return gulp.src(['src/**/*.html'], {base: 'src'})
                .pipe(useref())
                .pipe(gulp.dest('dist'))
        ;
});

gulp.task('build-copy', function(){
        return gulp.src(['src/**/*.{svg,png,jpg,gif,json}'], {base: 'src'})
                .pipe(gulp.dest('dist'))
        ;
});

gulp.task('build', ['clean:dist', 'build-js', 'build-css', 'build-html', 'build-copy']);

这样可以更轻松地查看您为每种类型的文件执行的操作，并防止在错误类型的文件上意外执行操作。

Gulp构建序列会破坏图像文件

1 个答案: