OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Gulp build sequence corrupts image files

  • Thread starter Thread starter element11
  • Start date Start date
E

element11

Guest
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.

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

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

<p>I have it set up to preserve my folder structure and copy html files to a <code>dist</code> 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.</p>

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

<p>Here is the relevant part of my <code>gulpfile</code>. Any help is appreciated.</p>

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

Latest posts

A
Replies
0
Views
1
AgencyAnalytics
A
S
Replies
0
Views
1
Stacker Media
S
C
Replies
0
Views
1
CC.Talent
C
Top