angularjs - plugin - intellij idea angular 5

Cómo configurar Grunt para reemplazar las dependencias de Bower por sus versiones minificadas

Question

Soy nuevo en Yeoman / Grunt / Bower. Tengo un archivo bower.json que define las siguientes dependencias:

Bower.json

{
"dependencies": {
"angular": "~1.0.7",
"jquery": "~1.8.0",
"bootstrap": "~2.3.2",
"angular-grid": "~2.0.5"
}
}

En mi archivo html estoy usando las versiones no minificadas de esas bibliotecas, que instalé a través del comando bower install

index.html

<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>

¿Cómo puedo configurar gruñido, por lo que:

1. Copie solo las versiones minificadas de esos archivos js en el directorio de compilación
2. Reemplace el HTML para que cambie, por ejemplo, jquery.js a jquery.min.js
3. Cuando no se utilizan CDN, ¿se recomienda combinar todos los archivos junto con el script de aplicación personalizado?

¿Cuál es el enfoque correcto aquí? ¿Tengo que definir cada lib en una tarea de copia ronca? Me gusta:

Gruntfile.js:

copy: {
dist: {
files: [{
src: [
''components/jquery/jquery.min.js'',
''components/bootstrap/docs/assets/js/bootstrap.min.js'',
''components/angular/angular.min.js'',
''components/angular-grid/build/ng-grid.min.js''
]
}]
}
}

Answer 1

Las versiones modificadas de las bibliotecas JavaScript que está utilizando no se enviarán con los módulos Bower. Reducir y concatenar no es algo de lo que sea responsable el administrador de paquetes, sino su canal de compilación.

Con Yeoman , la forma recomendada es usar grunt-usemin , que se encargará de todos los pasos necesarios. Puede ver un ejemplo de esto al crear una nueva aplicación con yo webapp y echar un vistazo a Gruntfile.js e index.html generados.

En tu caso, necesitarías agregar un comentario alrededor de tu script que incluye:

<!-- build:js scripts/main.js -->
<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>
<!-- endbuild -->

Y asegúrese de tener las tareas de usemin correspondientes en su canal Grunt:

useminPrepare: {
options: {
dest: ''dist''
},
html: ''app/index.html''
},
usemin: {
options: {
dirs: [''dist'']
},
html: [''dist/{,*/}*.html''],
css: [''dist/styles/{,*/}*.css'']
},

Answer 2

Otra opción si está interesado en usar javascript minimizado y también tener la versión del paquete en la ruta de inclusión es usar grunt-version-copy-bower-components . Este plugin grunt gestiona la copia del componente de bower en un directorio de destino, incluye la versión del componente en la ruta del componente y modifica los archivos de referencia (html y css) para usar la ruta de miniaturas versionada.

Incluir la versión en la ruta de los componentes puede ser útil si el sitio está alojado con un caché (detrás de un CDN). Le permite especificar largos tiempos de caché para los componentes del bower. Al cambiar a una nueva versión del componente Bower, la URL será nueva y la memoria caché buscará la nueva en lugar de servir un componente obsoleto.

Una configuración de ejemplo:

versionCopyBowerComponents: {
options: {
exclude: [''underscore''],
dest: ''dist/libs'',
filesReferencingComponents: {
files: [''dist/test.html'', ''dist/test.css''],
useComponentMin: true
}
}
}

El complemento determinará los componentes de bower que su proyecto está utilizando y los instalará automáticamente en la ruta especificada en dest. Los archivos enumerados en filesReferencingComponents-> son archivos que incluyen / source the bower component. Especificar useComponentMin hará que elija la versión minimizada del componente.

Answer 3

Sería una mala práctica minificar una biblioteca que ya existe en una versión minificada. Afortunadamente, al menos para angularJS, el paquete bower incluye el archivo angular.min.js.map. Con este mapa fuente, creo que no tiene sentido incluir en ningún momento el archivo no minificado en la fuente. Solo incluya el archivo min, déjelo fuera del minitor de Grunt y permita que el navegador se asigne a la fuente no miniaturizada.

Answer 4

no es necesario cambiar el html, intente grunt-contrib-uglify

uglify: {
libs: {
files: [
{
expand: true,
cwd: ''components'',
src: ''**/*.js'',
dest: ''build/components''
}
]
}
}

y si el archivo se solicita más una página, el navegador lo almacenará en caché, se cargará más rápido que el archivo más grande combinado.