strong script print mixin loop jade for javascript gruntjs yeoman grunt-usemin

javascript - print - ¿Cómo incluir scripts automáticamente en un proyecto yeoman/grunt?



pugjs each (1)

Tengo un proyecto yeoman de trabajo. Estoy usando grunt-usemin.

Para incluir javascripts, hago esto en index.html :

<!-- build:js scripts/includes.js --> <script src="/bower_components/jquery/jquery.min.js"></script> <script src="/bower_components/underscore/underscore-min.js"></script> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-route/angular-route.min.js"></script> <script src="/bower_components/angular-resource/angular-resource.min.js"></script> <script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script> <script src="/bower_components/angular-ui-date/src/date.js"></script> <script src="/bower_components/angulartics/src/angulartics.js"></script> <script src="/bower_components/angulartics/src/angulartics-ga.js"></script> <script src="/bower_components/jquery-ui/ui/jquery-ui.js"></script> <script src="/assets/vendor/bootstrap.2.3.1.min.js"></script> ... a few more libs like that <script src="/scripts/config.processed.js"></script> <script src="/scripts/app.js"></script> <script src="/scripts/controllers/first_controller.js"></script> <script src="/scripts/controllers/second_controller.js"></script> <script src="/scripts/controllers/third_controller.js"></script> <script src="/scripts/controllers/fourth_controller.js"></script> <script src="/scripts/controllers/fith_controller.js"></script> <script src="/scripts/controllers/sixth_controller.js"></script> <script src="/scripts/controllers/seventh_controller.js"></script> ... 20 more like that <script src="/scripts/directives/first_directive.js"></script> <script src="/scripts/directives/second_directive.js"></script> <script src="/scripts/directives/third_directive.js"></script> ... 10 more like that <script src="/scripts/services/first_service.js"></script> <script src="/scripts/services/second_service.js"></script> ... <script src="/scripts/filters/first_filter.js"></script> <script src="/scripts/filters/second_filter.js"></script> ... <!-- endbuild -->

Esto es detallado. Me gustaría poder hacer algo como esto:

En index.html :

<!-- build:js scripts/includes.js --> <!-- library includes as before --> <script src="/bower_components/jquery/jquery.min.js"></script> <script src="/bower_components/underscore/underscore-min.js"></script> ... <!-- Replace application includes with this: --> <script src="<% ''/scripts/**/*.js'' %>"></script> <!-- endbuild -->


grunt-include-source

Instalarlo:

npm install grunt-include-source --save-dev

En Gruntfile:

Cárguelo antes de initConfig:

module.exports = function (grunt) { ... grunt.loadNpmTasks(''grunt-include-source'');

Configure el propio includeSource en initConfig:

grunt.initConfig({ ..., includeSource: { options: { basePath: ''app'', baseUrl: ''/'', }, server: { files: { ''.tmp/index.html'': ''<%= yeoman.app %>/index.html'' } }, dist: { files: { ''<%= yeoman.dist %>/index.html'': ''<%= yeoman.app %>/index.html'' } } }

Agregue esta tarea donde desee (aquí, la agrego a la tarea de compilación):

grunt.registerTask(''build'', [ ''clean:dist'', ''includeSource:dist'', ''useminPrepare'', ...

Añádelo a la tarea de reloj:

watch: { ..., includeSource: { files: [''<%= yeoman.app %>/index.html''], tasks: [''includeSource:server''] }

Cambia useminPrepare (si usas yeoman)

useminPrepare: { // changed from app to dist, to take index.html processed by includeSource in dist html: ''<%= yeoman.dist %>/index.html'', options: { dest: ''<%= yeoman.dist %>'' } },

He usado subtareas: dist y server para generar el index.html en diferentes directorios.

Edición : Cómo incluir tus javascripts en index.html:

<!-- build:js({.tmp,dist,app}) /scripts/application.js --> <!-- vendor, external --> <script src="/bower_components/jquery/jquery.min.js"></script> <script src="/bower_components/underscore/underscore-min.js"></script> <script src="/assets/vendor/underscore.extentions.js"></script> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/select2/select2.js"></script> <script src="/bower_components/angular-ui-select2/src/select2.js"></script> <!-- entry point --> <script src="/scripts/config.processed.js"></script> <script src="/scripts/app.js"></script> <!--include everything in scripts/ except files directly inside scripts (without subdirectory) --> <!-- include: "type": "js", "files": ["scripts/**/*.js", "!scripts/*.js"] --> <!-- endbuild -->

Si quieres incluir todos los scripts, haz esto:

<!-- include: "type": "js", "files": "scripts/**/*.js" -->