nodejs locally instalar grunt css angularjs gruntjs yeoman-generator-angular gruntfile

css - locally - nodejs grunt



Grunt Build: CSS no busca en el directorio de la imagen derecha (3)

Tengo una aplicación angular generada a través de yeoman.

Cuando ejecuto grunt build, main.css está buscando archivos en el directorio / assets / images, que es la estructura de mi proyecto. Las ubicaciones de los archivos no se cambian en el CSS.

Mi estructura de proyecto de directorio dist :

  • dist /
    • bower_components /
    • imágenes /
    • guiones
    • estilos /
    • index.html

El problema

main.css está buscando / assets / images en lugar de / images. No estoy seguro de qué plugin está causando esto.

Específicamente, estoy usando la imagen de fondo.

.landing-container { background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.25) 52%,rgba(0,0,0,1) 100%), url(''/assets/images/bg_landing.jpg''); }

Aquí está mi paquete. Json:

"devDependencies": { "grunt": "^0.4.5", "grunt-autoprefixer": "^2.0.0", "grunt-concurrent": "^1.0.0", "grunt-contrib-clean": "^0.6.0", "grunt-contrib-compass": "^1.0.0", "grunt-contrib-concat": "^0.5.0", "grunt-contrib-connect": "^0.9.0", "grunt-contrib-copy": "^0.7.0", "grunt-contrib-cssmin": "^0.12.0", "grunt-contrib-htmlmin": "^0.4.0", "grunt-contrib-imagemin": "^1.0.0", "grunt-contrib-jshint": "^0.11.0", "grunt-contrib-uglify": "^0.7.0", "grunt-contrib-watch": "^0.6.1", "grunt-filerev": "^2.1.2", "grunt-google-cdn": "^0.4.3", "grunt-karma": "*", "grunt-newer": "^1.1.0", "grunt-ng-annotate": "^0.9.2", "grunt-svgmin": "^2.0.0", "grunt-usemin": "^3.0.0", "grunt-wiredep": "^2.0.0", "jshint-stylish": "^1.0.0", "karma-jasmine": "*", "karma-phantomjs-launcher": "*", "load-grunt-tasks": "^3.1.0", "time-grunt": "^1.0.0"

}

Aquí están mis tareas de archivos grunt:

// 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''] }, server: { options: { map: true, }, files: [{ expand: true, cwd: ''.tmp/styles/'', src: ''{,*/}*.css'', dest: ''.tmp/styles/'' }] }, dist: { files: [{ expand: true, cwd: ''.tmp/styles/'', src: ''{,*/}*.css'', dest: ''.tmp/styles/'' }] } }, // Automatically inject Bower components into the app wiredep: { app: { src: [''<%= yeoman.app %>/index.html''], ignorePath: //././// }, test: { devDependencies: true, src: ''<%= karma.unit.configFile %>'', ignorePath: //././//, fileTypes:{ js: { block: /(([/s/t]*)//{2}/s*?bower:/s*?(/S*))(/n|/r|.)*?(//{2}/s*endbower)/gi, detect: { js: /''(.*/.js)''/gi }, replace: { js: ''/'{{filePath}}/','' } } } }, sass: { src: [''<%= yeoman.app %>/assets/styles/{,*/}*.{scss,sass}''], ignorePath: /(/././/){1,2}bower_components/// } }, // Compiles Sass to CSS and generates necessary files if requested compass: { options: { sassDir: ''<%= yeoman.app %>/assets/styles'', cssDir: ''.tmp/styles'', generatedImagesDir: ''.tmp/images/generated'', imagesDir: ''<%= yeoman.app %>/assets/images'', javascriptsDir: ''<%= yeoman.app %>/scripts'', // ???? fontsDir: ''<%= yeoman.app %>/styles/fonts'', importPath: ''./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: { sourcemap: true } } }, // Renames files for browser caching purposes filerev: { dist: { 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 filerev and the useminPrepare configuration usemin: { html: [''<%= yeoman.dist %>/{,*/}*.html''], css: [''<%= yeoman.dist %>/styles/{,*/}*.css''], options: { assetsDirs: [ ''<%= yeoman.dist %>'', ''<%= yeoman.dist %>/styles'', ''<%= yeoman.dist %>/scripts'', ''<%= yeoman.dist %>/images'' ] } }, // The following *-min tasks will produce minified files in the dist folder // 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'' // ] // } // } // }, uglify: { dist: { files: { ''<%= yeoman.dist %>/scripts/scripts.js'': [ ''<%= yeoman.dist %>/scripts/scripts.js'' ] } } }, // concat: { // dist: {} // }, imagemin: { dist: { files: [{ expand: true, cwd: ''<%= yeoman.app %>/assets/images'', src: ''{,*/}*.{png,jpg,jpeg,gif}'', dest: ''<%= yeoman.dist %>/images'' }] } }, svgmin: { dist: { files: [{ expand: true, cwd: ''<%= yeoman.app %>/assets/images'', src: ''{,*/}*.svg'', dest: ''<%= yeoman.dist %>/images'' }] } }, htmlmin: { dist: { options: { collapseWhitespace: true, conservativeCollapse: true, collapseBooleanAttributes: true, removeCommentsFromCDATA: true, removeOptionalTags: true }, files: [{ expand: true, cwd: ''<%= yeoman.dist %>'', src: [''*.html'', ''scripts/**/*.html''], dest: ''<%= yeoman.dist %>'' }] } }, // ng-annotate tries to make the code safe for minification automatically // by using the Angular long form for dependency injection. ngAnnotate: { 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'', ''scripts/**/*.html'', ''assets/images/{,*/}*.{webp}'', ''assets/styles/fonts/{,*/}*.*'' ] }, { expand: true, cwd: ''.tmp/images'', dest: ''<%= yeoman.dist %>/images'', src: [''generated/*''] }, { expand: true, cwd: ''.'', src: ''bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*'', dest: ''<%= yeoman.dist %>'' }] }, styles: { expand: true, cwd: ''<%= yeoman.app %>/assets/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'', // Good - I think ''imagemin'', // Good ''svgmin'' // Good ] }, // Test settings karma: { unit: { configFile: ''test/karma.conf.js'', singleRun: true } }


Puede intentar cambiar la opción de brújula

httpImagesPath: ''/images'',

a

httpImagesPath: ''../images'',


imagesDir probablemente haga el problema:

// Compiles Sass to CSS and generates necessary files if requested compass: { options: { sassDir: ''<%= yeoman.app %>/assets/styles'', cssDir: ''.tmp/styles'', generatedImagesDir: ''.tmp/images/generated'', imagesDir: ''<%= yeoman.app %>/assets/images'',

Tenga en cuenta que cuando hace ronco, mira que usa el directorio .tmp, probablemente la estructura de grunt hace el catálogo de dist. bdw. Yo uso gulp y libsass, que es mucho más rápido.


necesita dar el patrón para cambiar las referencias .

options: { assetsDirs: [ ''<%= yeoman.dist %>'', ''<%= yeoman.dist %>/images'', ''<%= yeoman.dist %>/styles'' ], patterns: { js: [[/(images//[^''''""]*/.(png|jpg|jpeg|gif|webp|svg))/g, ''Replacing references to images'']] } }