CODEWITHSUNDEEP
javascriptangularjsgulp
element11
element11

Reputation: 4475

Gulp build sequence corrupts image files

Im still fairly new with Gulp so please bear with me. I currently have an Angular app and a build task with Gulp.

I have it set up to preserve my folder structure and copy html files to a dist folder for the production build. My angular app is concatenated and minified, and everything is working as expected, except for my images. My svg, json, etc are also being copied correctly.

My images are being copied to the proper folder, but they are corrupted and dont show up.

Here is the relevant part of my gulpfile. Any help is appreciated.

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

Upvotes: 4

Views: 1630

Answers (2)

Tai Vu
Tai Vu

Reputation: 361

This question was quite old, but i faced this issue recently.

I fixed it by using {encoding: false} config for images. Hope this helps

gulp.task('copy-images', function(){
  return gulp
            .src('src/**/*.{svg,png,jpg,gif}', {encoding: false})
            .pipe(gulp.dest('dist'));
});

Upvotes: 4

kicken
kicken

Reputation: 2167

gulp-useref corrupts binary files

My preferred method is to use separate tasks for the different types of files. For example:

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']);

This makes it easier to see what you're doing for each type of files and prevents accidentally performing an operation on the wrong type of file.

Upvotes: 3

Related Questions