gruntjs - Grunt Image Paths in CoffeeScript (eco) Templates -
i've ran slight issue referring images in production environment. image files generated using imagemin , end /images/.. files – which totally fine, don't know how refer them in coffeescript. in eco templates i'm using backbonejs with.
everything works fine in css – compass seems taking care of putting in right urls. there's no helper can use (or don't know how) refer image url.
so simple:
<img src="images/draggable.png" /> works in development, not in production.
any appreciated.
i'm using grunt/yeoman. here's gruntfile.js:
'use strict'; if (process.env.node_env != 'production') { var livereload_port = 35729; var lrsnippet = require('connect-livereload')({port: livereload_port}); var mountfolder = function (connect, dir) { return connect.static(require('path').resolve(dir)); }; } // # globbing // performance reasons we're matching 1 level down: // 'test/spec/{,*/}*.js' // use if want match subfolders: // 'test/spec/**/*.js' // templateframework: 'lodash' module.exports = function (grunt) { // load grunt tasks require('matchdep').filterdev('grunt-*').foreach(grunt.loadnpmtasks); // configurable paths var yeomanconfig = { app: 'app', dist: 'dist' }; grunt.initconfig({ yeoman: yeomanconfig, watch: { options: { nospawn: true, livereload: true }, coffeetest: { files: ['test/spec/{,*/}*.coffee'], tasks: ['coffee:test'] }, compass: { files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], tasks: ['compass'] }, livereload: { options: { livereload: livereload_port }, files: [ '<%= yeoman.app %>/*.html', '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}' ] }, eco: { files: [ '<%= yeoman.app %>/scripts/templates/**/*.eco', '<%= yeoman.app %>/*.html', '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css', '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}' ], tasks: ['eco', 'coffee:dist', 'neuter'] }, jst: { files: [ '<%= yeoman.app %>/scripts/templates/*.ejs' ], tasks: ['jst'] }, neuter: { files: ['{.tmp,<%= yeoman.app %>}/scripts/**/*.{js,coffee}'], tasks: ['coffee:dist', 'neuter'] } }, connect: { options: { port: 9000, // change '0.0.0.0' access server outside hostname: 'localhost' }, livereload: { options: { middleware: function (connect) { return [ lrsnippet, mountfolder(connect, '.tmp'), mountfolder(connect, yeomanconfig.app) ]; } } }, test: { options: { middleware: function (connect) { return [ mountfolder(connect, '.tmp'), mountfolder(connect, 'test'), mountfolder(connect, yeomanconfig.app) ]; } } }, dist: { options: { middleware: function (connect) { return [ mountfolder(connect, yeomanconfig.dist) ]; } } } }, open: { server: { path: 'http://localhost:<%= connect.options.port %>' } }, clean: { dist: ['.tmp', '<%= yeoman.dist %>/*'], server: '.tmp' }, jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'gruntfile.js', '<%= yeoman.app %>/scripts/{,*/}*.js', '!<%= yeoman.app %>/scripts/vendor/*', 'test/spec/{,*/}*.js' ] }, mocha: { all: { options: { run: true, urls: ['http://localhost:<%= connect.options.port %>/index.html'] } } }, coffee: { dist: { files: [{ // rather compiling multiple files here should // require them main .coffee file expand: true, cwd: '<%= yeoman.app %>/scripts', src: '**/*.coffee', dest: '.tmp/scripts', ext: '.js' }] }, test: { files: [{ expand: true, cwd: '.tmp/spec', src: '*.coffee', dest: 'test/spec' }] } }, compass: { options: { sassdir: '<%= yeoman.app %>/styles', cssdir: '.tmp/styles', imagesdir: '<%= yeoman.app %>/images', javascriptsdir: '<%= yeoman.app %>/scripts', fontsdir: '<%= yeoman.app %>/styles/fonts', importpath: '<%= yeoman.app %>/bower_components', relativeassets: true }, dist: {}, server: { options: { debuginfo: true } } }, useminprepare: { html: '<%= yeoman.app %>/index.html', options: { dest: '<%= yeoman.dist %>' } }, usemin: { html: ['<%= yeoman.dist %>/{,*/}*.html'], css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], options: { dirs: ['<%= yeoman.dist %>'] } }, imagemin: { dist: { files: [{ expand: true, cwd: '<%= yeoman.app %>/images', src: '{,*/}*.{png,jpg,jpeg}', dest: '<%= yeoman.dist %>/images' }] } }, cssmin: { dist: { files: { '<%= yeoman.dist %>/styles/main.css': [ '.tmp/styles/{,*/}*.css', '<%= yeoman.app %>/styles/{,*/}*.css' ] } } }, htmlmin: { dist: { options: { /*removecommentsfromcdata: true, // https://github.com/yeoman/grunt-usemin/issues/44 //collapsewhitespace: true, collapsebooleanattributes: true, removeattributequotes: true, removeredundantattributes: true, useshortdoctype: true, removeemptyattributes: true, removeoptionaltags: true*/ }, files: [{ expand: true, cwd: '<%= yeoman.app %>', src: '*.html', dest: '<%= yeoman.dist %>' }] } }, copy: { dist: { files: [{ expand: true, dot: true, cwd: '<%= yeoman.app %>', dest: '<%= yeoman.dist %>', src: [ '*.{ico,txt}', '.htaccess', 'images/{,*/}*.{webp,gif}' ] }] } }, bower: { all: { rjsconfig: '<%= yeoman.app %>/scripts/main.js' } }, eco: { compile: { files: { '.tmp/scripts/templates.js': ['<%= yeoman.app %>/scripts/templates/{,*/}*.eco'] } } }, jst: { compile: { files: { '.tmp/scripts/templates.js': ['<%= yeoman.app %>/scripts/templates/*.ejs'] } } }, rev: { dist: { files: { src: [ '<%= yeoman.dist %>/scripts/{,*/}*.js', '<%= yeoman.dist %>/styles/{,*/}*.css', '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}', '<%= yeoman.dist %>/styles/fonts/*' ] } } }, neuter: { app: { src: '<%= yeoman.app %>/scripts/main.js', dest: '.tmp/scripts/combined-scripts.js' } } }); grunt.registertask('createdefaulttemplate', function () { grunt.file.write('.tmp/scripts/templates.js', 'this.jst = this.jst || {};'); }); grunt.registertask('server', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'open', 'connect:dist:keepalive']); } grunt.task.run([ 'clean:server', 'coffee:dist', 'createdefaulttemplate', 'eco', 'neuter:app', 'compass:server', 'connect:livereload', 'open', 'watch' ]); }); grunt.registertask('test', [ 'clean:server', 'coffee', 'createdefaulttemplate', 'eco', 'neuter:app', 'compass', 'connect:test', 'mocha' ]); grunt.registertask('build', [ 'clean:dist', 'coffee', 'createdefaulttemplate', 'eco', 'compass:dist', 'useminprepare', 'neuter:app', 'imagemin', 'htmlmin', 'concat', 'cssmin', 'uglify', 'copy', 'rev', 'usemin' ]); grunt.registertask('default', [ 'jshint', 'test', 'build' ]); grunt.registertask('heroku', 'build'); };
if site served root of host: domain.com, use absolute urls fix this: src="/images/image.png". if not, might have figure out are.
actually, problem grunt-rev task. renames images , updates css/html isnt doing in templates. either check plugin see if supports task , if doesn't, patch or not have images in templates , maybe have them in css background images.
Comments
Post a Comment