javascript - tutorial - install grunt locally

GruntJS: rutas de imagen erróneas después de la creación de grunt

Question

Grunt está jugando con mi CSS modificado y no puedo entender por qué y cómo evitarlo.

Para ser breve, antes de la minificación tengo algunas imágenes de fondo como esta:

.head-image {
height: 380px;
background: url("../images/head1_bg.png") repeat-x;
-webkit-background-size: cover;
background-size: cover;
}

Luego, después de todo el proceso, tengo un CSS modificado que va así (fragmento):

[...]background:url(/home/domo/projects/lp/.tmp/images/head1_bg.png) repeat-x;background-size:cover}[...]

La ruta antes mencionada no solo es una ruta absoluta, sino que incluso es incorrecta, ya que las imágenes se pueden encontrar en dist/images , no en .tmp/images (que ni siquiera existe ...).

Aquí se menciona un problema muy similar: yeoman # 824
Intenté 2 soluciones de ese hilo ( # 17759188 y # 29137057 ) pero fue en vano.

Incluso traté de usar la versión supuestamente parcheada de yeoman, como se indica en otra pregunta sobre Stack Overflow ( rutas de imágenes Yeoman CSS ), aún sin éxito ...

Tal vez alguien ya ha recorrido este camino y ha encontrado una solución que no he encontrado en Internet.

Editar: puedo agregar un detalle más

la ruta de la imagen dentro de los parciales HTML no se ve afectada, como esta:
ng-src="./images/box_{{$index+1}}.png"

Gruntfile.js

// Generated on 2014-07-14 using generator-angular 0.8.0
''use strict'';
// # Globbing
// for performance reasons we''re only matching one level down:
// ''test/spec/{,*/}*.js''
// use this if you want to recursively match all subfolders:
// ''test/spec/**/*.js''
module.exports = function (grunt) {
// Load grunt tasks automatically
require(''load-grunt-tasks'')(grunt);
// Time how long tasks take. Can help when optimizing build times
require(''time-grunt'')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: {
// configurable paths
app: require(''./bower.json'').appPath || ''app'',
dist: ''dist''
},
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: [''bower.json''],
tasks: [''bowerInstall'']
},
js: {
files: [''<%= yeoman.app %>/scripts/{,*/}*.js''],
tasks: [''newer:jshint:all''],
options: {
livereload: true
}
},
jsTest: {
files: [''test/spec/{,*/}*.js''],
tasks: [''newer:jshint:test'', ''karma'']
},
compass: {
files: [''<%= yeoman.app %>/styles/{,*/}*.{scss,sass}''],
tasks: [''compass:server'', ''autoprefixer'']
},
gruntfile: {
files: [''Gruntfile.js'']
},
livereload: {
options: {
livereload: ''<%= connect.options.livereload %>''
},
files: [
''<%= yeoman.app %>/{,*/}/{,*/}*.html'',
''.tmp/styles/{,*/}*.css'',
''<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}''
]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to ''0.0.0.0'' to access the server from outside.
hostname: ''0.0.0.0'',
livereload: 35729
},
livereload: {
options: {
open: true,
base: [
''.tmp'',
''<%= yeoman.app %>''
]
}
},
test: {
options: {
port: 9001,
base: [
''.tmp'',
''test'',
''<%= yeoman.app %>''
]
}
},
dist: {
options: {
base: ''<%= yeoman.dist %>''
}
}
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: ''.jshintrc'',
reporter: require(''jshint-stylish'')
},
all: [
''Gruntfile.js'',
''<%= yeoman.app %>/scripts/{,*/}*.js''
],
test: {
options: {
jshintrc: ''test/.jshintrc''
},
src: [''test/spec/{,*/}*.js'']
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
''.tmp'',
''<%= yeoman.dist %>/*'',
''!<%= yeoman.dist %>/.git*''
]
}]
},
server: ''.tmp''
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: [''last 1 version'']
},
dist: {
files: [{
expand: true,
cwd: ''.tmp/styles/'',
src: ''{,*/}*.css'',
dest: ''.tmp/styles/''
}]
}
},
// Automatically inject Bower components into the app
bowerInstall: {
app: {
src: [''<%= yeoman.app %>/index.html''],
ignorePath: ''<%= yeoman.app %>/''
},
sass: {
src: [''<%= yeoman.app %>/styles/{,*/}*.{scss,sass}''],
ignorePath: ''<%= yeoman.app %>/bower_components/''
}
},
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: ''<%= yeoman.app %>/styles'',
cssDir: ''.tmp/styles'',
generatedImagesDir: ''.tmp/images/generated'',
imagesDir: ''<%= yeoman.app %>/images'',
javascriptsDir: ''<%= yeoman.app %>/scripts'',
fontsDir: ''<%= yeoman.app %>/styles/fonts'',
importPath: ''<%= yeoman.app %>/bower_components'',
httpImagesPath: ''/images'',
httpGeneratedImagesPath: ''/images/generated'',
httpFontsPath: ''/styles/fonts'',
relativeAssets: false,
assetCacheBuster: false,
raw: ''Sass::Script::Number.precision = 10/n''
},
dist: {
options: {
generatedImagesDir: ''<%= yeoman.dist %>/images/generated''
}
},
server: {
options: {
debugInfo: true
}
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
''<%= yeoman.dist %>/scripts/{,*/}*.js'',
''<%= yeoman.dist %>/styles/{,*/}*.css'',
''<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'',
''<%= yeoman.dist %>/styles/fonts/*''
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
html: ''<%= yeoman.app %>/index.html'',
options: {
dest: ''<%= yeoman.dist %>'',
flow: {
html: {
steps: {
js: [''concat'', ''uglifyjs''],
css: [''cssmin'']
},
post: {}
}
}
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: [''<%= yeoman.dist %>/{,*/}*.html''],
css: [''<%= yeoman.dist %>/styles/{,*/}*.css''],
options: {
assetsDirs: [''<%= yeoman.dist %>'']
}
},
// The following *-min tasks produce minified files in the dist folder
cssmin: {
options: {
root: ''<%= yeoman.app %>''
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: ''<%= yeoman.app %>/images'',
src: ''{,*/}*.{png,jpg,jpeg,gif}'',
dest: ''<%= yeoman.dist %>/images''
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: ''<%= yeoman.app %>/images'',
src: ''{,*/}*.svg'',
dest: ''<%= yeoman.dist %>/images''
}]
}
},
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: ''<%= yeoman.dist %>'',
src: [''*.html'', ''views/{,*/}*.html''],
dest: ''<%= yeoman.dist %>''
}]
}
},
// ngmin tries to make the code safe for minification automatically by
// using the Angular long form for dependency injection. It doesn''t work on
// things like resolve or inject so those have to be done manually.
ngmin: {
dist: {
files: [{
expand: true,
cwd: ''.tmp/concat/scripts'',
src: ''*.js'',
dest: ''.tmp/concat/scripts''
}]
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: [''<%= yeoman.dist %>/*.html'']
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: ''<%= yeoman.app %>'',
dest: ''<%= yeoman.dist %>'',
src: [
''*.{ico,png,txt}'',
''.htaccess'',
''*.html'',
''views/{,*/}*.html'',
''images/{,*/}*.{webp}'',
''fonts/*''
]
}, {
expand: true,
cwd: ''.tmp/images'',
dest: ''<%= yeoman.dist %>/images'',
src: [''generated/*'']
}]
},
styles: {
expand: true,
cwd: ''<%= yeoman.app %>/styles'',
dest: ''.tmp/styles/'',
src: ''{,*/}*.css''
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
''compass:server''
],
test: [
''compass''
],
dist: [
''compass:dist'',
''imagemin'',
''svgmin''
]
},
// By default, your `index.html`''s <!-- Usemin block --> will take care of
// minification. These next options are pre-configured if you do not wish
// to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// ''<%= yeoman.dist %>/styles/main.css'': [
// ''.tmp/styles/{,*/}*.css'',
// ''<%= yeoman.app %>/styles/{,*/}*.css''
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// ''<%= yeoman.dist %>/scripts/scripts.js'': [
// ''<%= yeoman.dist %>/scripts/scripts.js''
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Test settings
karma: {
unit: {
configFile: ''karma.conf.js'',
singleRun: true
}
}
});
grunt.registerTask(''serve'', function (target) {
if (target === ''dist'') {
return grunt.task.run([''build'', ''connect:dist:keepalive'']);
}
grunt.task.run([
''clean:server'',
''bowerInstall'',
''concurrent:server'',
''autoprefixer'',
''connect:livereload'',
''watch''
]);
});
grunt.registerTask(''server'', function (target) {
grunt.log.warn(''The `server` task has been deprecated. Use `grunt serve` to start a server.'');
grunt.task.run([''serve:'' + target]);
});
grunt.registerTask(''test'', [
''clean:server'',
''concurrent:test'',
''autoprefixer'',
''connect:test'',
''karma''
]);
grunt.registerTask(''build'', [
''clean:dist'',
''bowerInstall'',
''useminPrepare'',
''concurrent:dist'',
''autoprefixer'',
''concat'',
''ngmin'',
''copy:dist'',
''cdnify'',
''cssmin'',
''uglify'',
''rev'',
''usemin'',
''htmlmin''
]);
grunt.registerTask(''default'', [
''newer:jshint'',
''test'',
''build''
]);
};

Answer 1

¿Has considerado usar Brunch ? Ejecutan un complemento de nodo diferente para la minificación de CSS que Yeoman / Grunt. No tengo problemas para mantener mis rutas relativas "../" después de minificar con Brunch. Pruebe su esqueleto angular , solo deje caer su hoja de estilo y ejecute una compilación con

brunch build --production

minificar Vea si todavía tiene este problema de compilación. Hecho en 5 minutos

Answer 2

Hace algún tiempo, tuve un problema similar con cssmin ...

Mi configuración fue:

cssmin: {
options: {
root: ''<%= yeoman.app %>''
}
},

luego root propiedad root y resolvió el problema.

UPD1: también necesita agregar imágenes a assetsDirs en configutarion para usemin:

usemin: {
html: [''<%= yeoman.dist %>/{,*/}*.html''],
css: [''<%= yeoman.dist %>/styles/{,*/}*.css''],
options: {
assetsDirs: [''<%= yeoman.dist %>'', ''<%= yeoman.dist %>/images'']
}
},

UPD2: Acerca de las imágenes con ng-src="./images/box_{{$index+1}}.png" , no es posible procesarlas directamente con usemin porque no hay forma de manejar la revisión de archivos en esta expresión. ..

Pero puede agregar un mapa separado con las URL de la imagen, como:

<div ng-init="boxes=[
{src:''images/box1.png''},
{src:''images/box2.png''},
{src:''images/box3.png''}]>
....
<img ng-src={{boxes[$index].src}}/>
....
</div>

Y procese esos mapas con un patrón adicional para usemin:

usemin: {
html: [''<%= yeoman.dist %>/{,*/}*.html''],
htmlExtra: [''<%= yeoman.dist %>/{,*/}*.html''],
css: [''<%= yeoman.dist %>/styles/{,*/}*.css''],
options: {
assetsDirs: [''<%= yeoman.dist %>'', ''<%= yeoman.dist %>/images''],
patterns:{
htmlExtra:[
[/[''"]?src[''"]?/s*:/s*[''"]([^"'']+)[''"]/gm, ''Replacing urls in image maps'']
]
}
}
},

Luego, después de la construcción, obtendrás algo como:

<div ng-init="boxes=[
{src:''images/box1.xxxx.png''},
{src:''images/box2.xxxx.png''},
{src:''images/box3.xxxx.png''}]">
....
<img ng-src={{boxes[$index].src}}/>
....
</div>

Answer 3

Tuve el mismo problema, eventualmente estaba usando el grunt.filerev.summary y las funciones de los patrones js, que encontraron el viejo img url y lo reemplazaron con el caso correspondiente en el "mapa" grunt.filerev.summary json