Gulp insert minified file in index

Question

Introducing

I am implementing the task automator Gulp, everything is going well, minified files, concatenated and optimized.

Problem

Now what I need is to take the minified file ( all.min.js ) and insert it into my index.html removing the old imports, I tried to search something that did this but I couldn’t find it. Someone knows which one to use?

Gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    pngcrush = require('imagemin-pngcrush'),
    concat = require('gulp-concat'),
    htmlmin = require('gulp-htmlmin'),
    plumber = require('gulp-plumber'),
    jshint = require('gulp-jshint'),
    notify = require('gulp-notify'),
    open = require('gulp-open'),
    uglify = require('gulp-uglify')
    karma = require('gulp-karma');

// karma
var testFiles = [
    'app/scripts/main.js'
];

gulp.task('test', function() {
  // Be sure to return the stream
  return gulp.src(testFiles)
    .pipe(karma({
      configFile: 'karma.conf.js',
      action: 'run'
    }))
    .on('error', function(err) {
      // Make sure failed tests cause gulp to exit non-zero
      throw err;
    });
});

// servidor
gulp.task('express', function() {
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')({port: 4002}));
  app.use(express.static(__dirname+"/app"));
  app.listen(4000);
});

var tinylr;
gulp.task('livereload', function() {
    tinylr = require('tiny-lr')();
    tinylr.listen(4002);
});

function notifyLiveReload(event) {
    var fileName = require('path').relative(__dirname, event.path);

    tinylr.changed({
        body: {
            files: [fileName]
        }
    });
}
// Controle de erro pumbler
var onError =function(err){ 
    gulp.beep(); 
    console.log(err);
};
// Open url localhost:4000 in google chrome
gulp.task("url", function(){
    gulp.src('app/index.html')
    .pipe(open("", {app: "google-chrome", url: "http://localhost:4000"}));
});

// Compile SASS and minify
gulp.task('styles', function() {
      return gulp.src('app/styles/**/*.scss')
        .pipe(plumber({
            errorHendler: onError
        }))
        .pipe(sass({ style: 'expanded' }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
        .pipe(gulp.dest('app/css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('app/css'))
        .pipe(gulp.dest('dist/css'));
});

// lint jshhnit
gulp.task('lint', function(){
    return gulp.src('app/scripts/*.js')
        .pipe(plumber({
            errorHendler: onError
        }))
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
})
// observador
gulp.task('watch', function() {
    // Compila .sass
    gulp.watch(['app/styles/**/*.scss', 'app/styles/*.scss'], ['styles']);
    // livereload alter html file
    gulp.watch(['app/*.html', 'app/*/*.html'], notifyLiveReload);
    // live reload alter css file
    gulp.watch('app/*/*.css', notifyLiveReload);
    // duplicado arrumar depois
        // Lint alter JS file
        gulp.watch(['app/scripts/*.js', 'app/*/*.js'], ['lint']);
        // livereload alter JS file
        gulp.watch(['app/scripts/*.js', 'app/*/*.js'], notifyLiveReload);
    // ..
});

// BUILD
// minify img
gulp.task('imagemin', function(){
    return gulp.src('app/image/*')
        .pipe(plumber({
            errorHendler: onError
        }))
        .pipe(imagemin({
            progressive: true,
            svgoPlugins:[{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest('dist/image/'));
});

// concatenar js
gulp.task('scripts', function(){
    gulp.src('app/scripts/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(concat('all.js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
// minify html
gulp.task('minifyhtml', function(){
    gulp.src(['app/*.html', 'app/*/*.html'])
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist/'))
});


// Run '$ gulp'
gulp.task('default', [
                    'styles',
                    'express',
                    'url',
                    'livereload',
                    'watch',
                    'imagemin',
                    'minifyhtml',
                    'lint'
        ], function() {});
gulp.task('build', [
                'lint',
                'scripts',
                'minifyhtml',
                'imagemin',
                'styles'
    ])

Answer 1

I believe that what you are searching for is exactly what the plugin Gulp-usemin offers.

With the Gulp-usemin Voce can create a building block (build block) inside your index.html with all JS files that should be minified.

The plugin in addition to doing the entire minification will insert the <script src="path"></script> exactly where and how you want.

<!-- build:js js/all.min.js -->
   <script src="js/app.js"></script>
   <script src="js/controllers/controller.js"></script>
   <script src="js/directives/directives.js"></script>
<!-- endbuild -->
    |
    |  depois da minificação 
    |
    V
<script src="js/all.min.js"></script>

In the same way that you can create blocks for JS files, you create for CSS files as well.