2

Introdução

Estou implemento o automatizador de tarefas Gulp, está tudo indo bem, arquivos minificados, concatenados e otimizados.

Problema

Agora o que me falta é pegar o arquivo minificado ( all.min.js ) e inseri-lo em minha index.html removendo as importações antigas, tentei pesquisar algo que fizesse isso mas não encontrei. Alguém sabe qual usar?

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'
    ])
4
  • Pode colocar o código que já tem? Está a integrar o js dentro do index.html? por que não ter um ficheiro à parte?
    – Sergio
    Commented 23/09/2014 às 22:12
  • @Sergio opa acho que me expressei mal, tenho ele em um ficheiro a parte all.min.js (apos processo de concat e minify), oque quero agora é pegar o endereço do documento e inserir em meu html ( <script src="path"></script> )
    – ralfting
    Commented 24/09/2014 às 4:16
  • @Sergio inseri o Gulpfile.js na pergunta;
    – ralfting
    Commented 24/09/2014 às 4:20
  • Porque voce não dá overwite no seu arquivo JS que voce está substituindo? Commented 23/10/2014 às 18:15

1 Resposta 1

2

Eu acredito que o que você esta buscando é exatamente o que o plugin gulp-usemin oferece.

Com o gulp-usemin voce pode criar um bloco de construção (build block) dentro do seu index.html com todos os arquivos JS que devem ser minificados.

O plugin além de fazer toda a minificação vai inserir a <script src="path"></script> exatamente aonde e como você quiser.

<!-- 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>

Da mesma forma que você pode criar blocos para JS files, você criar para CSS files também.

1
  • 1
    Exatamente isso!
    – ralfting
    Commented 27/10/2014 às 11:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .