🥇 Injete JS e CSS em HTML usando Gulp

Frameworks como Ruby on Rails injetam automaticamente todos os arquivos JS e CSS no HTML. Isso também é possível em uma pilha baseada em JS usando Gulp e dois plug-ins.

Wiredep para bibliotecas externas e gulp-inject para nossos próprios arquivos.

Wiredep

O Wiredep irá escanear nosso arquivo de configuração do Bower em busca de dependências, determinar a ordem a ser incluída e inseri-los no arquivo HTML. Isso é possível graças ao campo principal na biblioteca bower.json que informa os arquivos de ação primária necessários para usar o pacote.

{
    "name": "jquery",
    "version": "2.1.4",
    "main": "dist/jquery.js"
}

Em seu gulpfile.js , definimos a seguinte tarefa.

var gulp = require('gulp');
var wiredep = require('wiredep').stream;

var paths = {
    (...)
};

gulp.task('inject-vendor', function() {
    gulp.src(paths.index)
        .pipe(wiredep({}))
        .pipe(gulp.dest('./www'));
});

E em nosso index.html adicionamos a seguinte anotação.

<html>
    <head>
        <! -- bower:css -->
        <! -- endbower -->
    </head>
     <body>
        (...)
        <! -- bower:js -->
        <! -- endbower -->
    </body>
</html>

Agora, toda vez que executarmos a tarefa, os arquivos de bibliotecas aparecerão dentro da anotação. Podemos até fazê-lo rodar automaticamente sempre que uma nova dependência é instalada, adicionando as seguintes linhas ao nosso arquivo .bowerrc .

{
  "script": {
    "postinstall": "gulp inject-vendor"
  }
}

Gulp-Inject

O Gulp-inject lerá todos os arquivos e os injetará em espaços reservados, como o Wiredep. Isso é feito com outra tarefa de gole.

var inject = require('gulp-inject');

(...)

gulp.task('inject-own', function() {
    gulp.src(paths.index)
        .pipe(inject(gulp.src(paths.sources, {read: false})))
        .pipe(gulp.dest('./www'));
});

E em nosso index.html .

<html>
    <head>
      <!-- bower:css -->
      <!-- endbower -->

      <!-- inject:css -->
      <!-- endinject -->
    </head>
    <body>
      <!-- bower:js -->
      <!-- endbower -->

      <!-- inject:js -->
      <!-- endinject -->
    </body>
</html>

Wiredep

Gulp-Inject

Related Posts