bguiz / ember-sprite Goto Github PK

View Code? Open in Web Editor NEW

30.0 30.0 9.0 171 KB

An add-on which generates sprite sheets for your EmberJs projects

JavaScript 75.70% CSS 0.23% HTML 15.17% Smarty 8.89%

ember-sprite's People

Contributors

Stargazers

Watchers

Forkers

jmonster matthiasleitner olivia dhaulagiri nadavshatz cryrivers fivetanley zonkyio

ember-sprite's Issues

Generating multiple sprites?

With this plugin, is there a way to generate both a retina and non-retina sprite? It seems like this line makes it so you can only pass one sprite to the plugin, but maybe I'm missing something?

Path or pattern "assets/undefined.css" did not match any files [string exception]

I'm unable to get this to work on ember-cli v0.1.2. See below:

jmonster:foo/ (sprites✗) $ ember server                                                                                                                                                [12:39:25]
version: 0.1.2
spriteTree { inputTrees:
   [ { inputTree:
        { inputTree: 'app',
          options:
           { srcDir: '/',
             files: [ 'index.html' ],
             destDir: '/' } },
       configTree:
        { inputTree:
           { _inputTreeCacheHash: [],
             _shouldBeIgnoredCache: {},
             destDir: '/Users/jmonster/Documents/foo/tmp/caching-writer-dest-dir_C60rKh.tmp',
             env: 'development',
             tests: true,
             project:
              { root: '/Users/jmonster/Documents/foo',
                pkg:
                 { name: 'foo',
                   version: '0.0.0',
                   private: true,
                   directories: [Object],
                   scripts: [Object],
                   repository: 'https://github.com/stefanpenner/ember-cli',
                   engines: [Object],
                   author: '',
                   license: 'MIT',
                   devDependencies: [Object] },
                addonPackages:
                 { 'tests-server-middleware': [Object],
                   'history-support-middleware': [Object],
                   'serve-files-middleware': [Object],
                   'proxy-server-middleware': [Object],
                   'broccoli-asset-rev': [Object],
                   'ember-cli-content-security-policy': [Object],
                   'ember-cli-ic-ajax': [Object],
                   'ember-cli-inject-live-reload': [Object],
                   'ember-cli-qunit': [Object],
                   'ember-data': [Object],
                   'ember-export-application-global': [Object],
                   'ember-sprite': [Object] },
                liveReloadFilterPatterns: [],
                bowerDirectory: 'bower_components',
                addons:
                 [ [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object] ],
                _addonsInitialized: true },
             inputTrees: [ 'config' ],
             filterFromCache: { include: [], exclude: [] },
             options:
              { env: 'development',
                tests: true,
                project:
                 { root: '/Users/jmonster/Documents/foo',
                   pkg: [Object],
                   addonPackages: [Object],
                   liveReloadFilterPatterns: [],
                   bowerDirectory: 'bower_components',
                   addons: [Object],
                   _addonsInitialized: true } } },
          options: { srcDir: '/', destDir: 'foo/config' } },
       options:
        { configPath: 'foo/config/environments/development.json',
          files: [ 'index.html' ],
          patterns:
           [ { match: /\{\{EMBER_ENV\}\}/g,
               replacement: [Function: calculateEmberENV] },
             { match: /\{\{APP_CONFIG\}\}/g,
               replacement: [Function: calculateAppConfig] },
             { match: /\{\{content-for ['"](.+)["']\}\}/g,
               replacement: [Function] },
             { match: /\{\{MODULE_PREFIX\}\}/g,
               replacement: [Function: calculateModulePrefix] } ] } },
     { inputTrees:
        [ { inputTree:
             { inputTrees:
                [ [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object] ],
               options:
                { overwrite: true,
                  description: 'TreeMerger (appAndDependencies)' },
               description: 'TreeMerger (appAndDependencies)' },
            inputFiles:
             [ 'vendor/ember-cli/vendor-prepend.js',
               'bower_components/loader.js/loader.js',
               'bower_components/jquery/dist/jquery.js',
               'bower_components/handlebars/handlebars.js',
               'bower_components/ember/ember.js',
               'bower_components/ember-cli-shims/app-shims.js',
               'bower_components/ember-resolver/dist/modules/ember-resolver.js',
               'bower_components/ember-load-initializers/ember-load-initializers.js',
               'vendor/ic-ajax/dist/named-amd/main.js',
               'bower_components/ember-data/ember-data.js',
               'vendor/addons.js' ],
            outputFile: '/assets/vendor.js',
            separator: '\n;',
            cache: {},
            cachedConcatenatedOutputHash: null },
          { inputTree:
             { inputTrees: [ [Object], [Object] ],
               options: {},
               description: undefined },
            inputFiles:
             [ 'assets/foo.js',
               'vendor/ember-cli/app-suffix.js' ],
            outputFile: '/assets/foo.js',
            cache: {},
            cachedConcatenatedOutputHash: null } ],
       options: {},
       description: undefined },
     { inputTrees:
        [ { inputTree:
             { inputTrees:
                [ [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object] ],
               options: { description: 'TreeMerger (stylesAndVendor)' },
               description: 'TreeMerger (stylesAndVendor)' },
            _includeFileCache: {},
            _destinationPathCache: {},
            _tmpDir: '/Users/jmonster/Documents/foo/tmp/funnel-dest_FX2AJZ.tmp',
            srcDir: '/app/styles',
            getDestinationPath: [Function],
            destDir: '/',
            destPath: '/Users/jmonster/Documents/foo/tmp/funnel-dest_FX2AJZ.tmp' },
          { inputTree:
             { inputTrees:
                [ [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object],
                  [Object] ],
               options: { description: 'TreeMerger (stylesAndVendor)' },
               description: 'TreeMerger (stylesAndVendor)' },
            inputFiles: [ 'vendor/addons.css' ],
            outputFile: '/assets/vendor.css',
            description: 'concatFiles - vendorStyles',
            cache: {},
            cachedConcatenatedOutputHash: null } ],
       options: { description: 'styles' },
       description: 'styles' },
     { inputTrees:
        [ { inputTree:
             { inputTrees: [ [Object], [Object] ],
               options: { description: 'TreeMerger (ExternalTree)' },
               description: 'TreeMerger (ExternalTree)' },
            options:
             { srcDir: 'bower_components/ember-qunit-notifications',
               files: [ 'passed.png' ],
               destDir: 'assets' } },
          { inputTree:
             { inputTrees: [ [Object], [Object] ],
               options: { description: 'TreeMerger (ExternalTree)' },
               description: 'TreeMerger (ExternalTree)' },
            options:
             { srcDir: 'bower_components/ember-qunit-notifications',
               files: [ 'failed.png' ],
               destDir: 'assets' } } ],
       options: { description: 'TreeMerger (otherAssetTrees)' },
       description: 'TreeMerger (otherAssetTrees)' },
     { inputTrees:
        [ { inputTrees: [], options: {} },
          { inputTrees: [], options: {} },
          { inputTrees: [], options: {} },
          { inputTrees: [], options: {} },
          { inputTrees: [], options: {} },
          'public' ],
       options: { overwrite: true },
       description: undefined },
     { inputTree:
        { inputTree: 'tests',
          options:
           { srcDir: '/',
             files: [ 'index.html' ],
             destDir: '/tests' } },
       configTree:
        { inputTree:
           { _inputTreeCacheHash: [],
             _shouldBeIgnoredCache: {},
             destDir: '/Users/jmonster/Documents/foo/tmp/caching-writer-dest-dir_C60rKh.tmp',
             env: 'development',
             tests: true,
             project:
              { root: '/Users/jmonster/Documents/foo',
                pkg:
                 { name: 'foo',
                   version: '0.0.0',
                   private: true,
                   directories: [Object],
                   scripts: [Object],
                   repository: 'https://github.com/stefanpenner/ember-cli',
                   engines: [Object],
                   author: '',
                   license: 'MIT',
                   devDependencies: [Object] },
                addonPackages:
                 { 'tests-server-middleware': [Object],
                   'history-support-middleware': [Object],
                   'serve-files-middleware': [Object],
                   'proxy-server-middleware': [Object],
                   'broccoli-asset-rev': [Object],
                   'ember-cli-content-security-policy': [Object],
                   'ember-cli-ic-ajax': [Object],
                   'ember-cli-inject-live-reload': [Object],
                   'ember-cli-qunit': [Object],
                   'ember-data': [Object],
                   'ember-export-application-global': [Object],
                   'ember-sprite': [Object] },
                liveReloadFilterPatterns: [],
                bowerDirectory: 'bower_components',
                addons:
                 [ [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object],
                   [Object] ],
                _addonsInitialized: true },
             inputTrees: [ 'config' ],
             filterFromCache: { include: [], exclude: [] },
             options:
              { env: 'development',
                tests: true,
                project:
                 { root: '/Users/jmonster/Documents/foo',
                   pkg: [Object],
                   addonPackages: [Object],
                   liveReloadFilterPatterns: [],
                   bowerDirectory: 'bower_components',
                   addons: [Object],
                   _addonsInitialized: true } } },
          options: { srcDir: '/', destDir: 'foo/config' } },
       options:
        { configPath: 'foo/config/environments/test.json',
          files: [ 'tests/index.html' ],
          env: 'test',
          patterns:
           [ { match: /\{\{EMBER_ENV\}\}/g,
               replacement: [Function: calculateEmberENV] },
             { match: /\{\{APP_CONFIG\}\}/g,
               replacement: [Function: calculateAppConfig] },
             { match: /\{\{content-for ['"](.+)["']\}\}/g,
               replacement: [Function] },
             { match: /\{\{MODULE_PREFIX\}\}/g,
               replacement: [Function: calculateModulePrefix] } ] } },
     { inputTrees:
        [ { inputTree:
             { inputTrees: [ [Object], [Object] ],
               options: {},
               description: undefined },
            inputFiles:
             [ 'vendor/ember-cli/test-support-suffix.js',
               'assets/test-support.js' ],
            outputFile: '/assets/test-support.js',
            cache: {},
            cachedConcatenatedOutputHash: null },
          { inputTree:
             { inputTrees: [ [Object], [Object] ],
               options: { description: 'TreeMerger (ExternalTree)' },
               description: 'TreeMerger (ExternalTree)' },
            inputFiles: [ 'bower_components/qunit/qunit/qunit.css' ],
            outputFile: '/assets/test-support.css',
            cache: {},
            cachedConcatenatedOutputHash: null },
          { inputTree:
             { inputTrees: [ [Object], [Object] ],
               options: { description: 'TreeMerger (ExternalTree)' },
               description: 'TreeMerger (ExternalTree)' },
            options:
             { files: [ 'test-loader.js' ],
               srcDir: '/bower_components/ember-cli-test-loader',
               destDir: '/assets/' } },
          { inputTree:
             { dir: '/Users/jmonster/Documents/foo/node_modules/ember-cli/lib/broccoli',
               description: 'Unwatched - /Users/jmonster/Documents/foo/node_modules/ember-cli/lib/broccoli' },
            options:
             { files: [ 'testem.js' ],
               srcDir: '/',
               destDir: '/' } } ],
       options:
        { overwrite: true,
          description: 'TreeMerger (testFiles)' },
       description: 'TreeMerger (testFiles)' } ],
  options:
   { overwrite: true,
     description: 'TreeMerger (allTrees)' },
  description: 'TreeMerger (allTrees)' }
Livereload server on port 35729
Serving on http://0.0.0.0:4200/
Running BroccoliSprite updateCache
srcDir /Users/jmonster/Documents/foo/tmp/static_compiler-tmp_dest_dir-BAGQ12pv.tmp
destDir /Users/jmonster/Documents/foo/tmp/broccoli_sprite-tmp_cache_dir-N7bNUmck.tmp
files [ '/Users/jmonster/Documents/foo/tmp/static_compiler-tmp_dest_dir-BAGQ12pv.tmp/images/sprites/**/*.png' ]
Options:  { debug: true,
  src: [ '/Users/jmonster/Documents/foo/tmp/static_compiler-tmp_dest_dir-BAGQ12pv.tmp/images/sprites/**/*.png' ],
  spritePath: '/Users/jmonster/Documents/foo/tmp/broccoli_sprite-tmp_cache_dir-N7bNUmck.tmp/assets/sprites.png',
  stylesheetPath: '/Users/jmonster/Documents/foo/tmp/broccoli_sprite-tmp_cache_dir-N7bNUmck.tmp/assets/sprites.css',
  stylesheet: 'css',
  stylesheetOptions:
   { prefix: 'icon-',
     spritePath: '/assets/sprites.png',
     pixelRatio: 2 },
  layoutOptions: { padding: 2 } }
spritePath /Users/jmonster/Documents/foo/tmp/broccoli_sprite-tmp_cache_dir-N7bNUmck.tmp/assets/sprites.png
stylesheetPath /Users/jmonster/Documents/foo/tmp/broccoli_sprite-tmp_cache_dir-N7bNUmck.tmp/assets/sprites.css
Sprite generated!
Path or pattern "assets/undefined.css" did not match any files [string exception]
Error: Path or pattern "assets/undefined.css" did not match any files [string exception]
    at /Users/jmonster/Documents/foo/node_modules/ember-cli/node_modules/broccoli/lib/builder.js:34:15
    at $$$internal$$tryCatch (/Users/jmonster/Documents/foo/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:470:16)
    at $$$internal$$invokeCallback (/Users/jmonster/Documents/foo/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:482:17)
    at $$$internal$$publish (/Users/jmonster/Documents/foo/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:453:11)
    at $$$internal$$publishRejection (/Users/jmonster/Documents/foo/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:395:7)
    at $$rsvp$asap$$flush (/Users/jmonster/Documents/foo/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1531:9)
    at process._tickCallback (node.js:419:13)

Should not be forced to use `public` directory

I don't think ember-sprite should force users to use public directory for sprites. As per ember-cli's guide on folder layout,

public/ This folder will be copied verbatim into the root of your built application. Use this for assets that don’t have a build step, such as images or fonts.

Sprite sheet generating is a build step, therefore it does not belong in public

broken compatibility with options.stylesheet?

Hey,
Using the below config snippet, I end up with scss code in my generated css file. Is this a supported use case? It seems like a regression from node-sprite-generator's functionality.

  sprite: {
    debug: true,
    src: [
      'assets/images/*checkbox*.png',
      'assets/images/*radiobutton*.png',
      'assets/images/*nav*.png'
    ],
    spritePath: 'assets/sprite-sheet.png',
    stylesheetPath: 'assets/sprites.scss',
    stylesheet: 'scss',
    stylesheetOptions: {
      prefix: 'icon-',
      spritePath: 'assets/sprite-sheet.png',
      pixelRatio: 2,
    },
    layoutOptions: {
      padding: 2,
    },
    compositor: 'gm'
  }

`nameMapping` callback in `stylesheetOptions` cannot be passed to `node-sprite-generator`

I tried and failed to fix this problem. any idea?

Error: write EPIPE

I've tried the basic settings on my application and tried just clone and run this repo as you suggested but both are not working. Could you help me?

ember-sprite incompatible with broccoli-asset-rev

When I trigger a production build of my ember-cli app like so:

ember build -e production

I get the following error:

Path or pattern "assets/myapp.css" did not match any files

This is because the file myapp.css has been renamed to myapp-cbabcba3bcabcb3a3bca3.css by broccoli-asset-rev.

Therefore ember-sprite cannot complete the css concatenation correctly and the build fails.

SVG support?

I am wondering if support will be added to this library for creating a sprite sheet with SVGs.

Thank you for this addon!

Cannot build when using custom CSS

I cannot build an app when a custom output path for app CSS is provided in the ember-cli-build.js.

Here is a showcase:

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    outputPaths: {
      app: {
        css: {
          app: '/assets/custom/sprites-app.css'
        }
      }
    },

    sprite: [
      {
        debug: true,
        src: ['assets/images/logos/*.png'],
        spritePath: 'assets/sprites.png',
        stylesheetPath: 'assets/sprites.css',
        stylesheet: 'css',
        stylesheetOptions: {
          spritePath: '/assets/sprites.png',
          pixelRatio: 2
        },
        layoutOptions: {
          padding: 2
        },
        optiping: process.env.NODE_ENV === 'production'
      }
    ]
  });

  return app.toTree();
};

It fails with:

Build failed.
Build Error (SimpleConcat)

ENOENT: no such file or directory, stat <PATH_TO_APP>/sprites-app/tmp/simple_concat-input_base_path-hHwVZmbj.tmp/0/assets/sprites-app.css'


Stack Trace and Error Report: /var/folders/r9/6q0zhq9155x4b7hrm636djh00000gn/T/error.dump.fab4b5bc874cc32022dedd14990abfec.log

If I remove the outputPaths setting from EmberApp function, the build process runs normally.

Do I need to merge trees somehow? Any idea?

How does this smart cache to prevent slow rebuilds?

This might be a question for broccoli-sprite but I thought to ask it here first as this is the ember-cli addon. My question is simple - I rarely add new images (it's the 5% case thus far) - but I'm always changing css/html/javascript and I'd like the rebuilds to take this into account. Will this addon always be run rebuilding all the images even when I only change css/html/javascript or is it smart enough to use the cached images (keeping my rebuilds as fast as they would be without this addon) ?

Issue with GraphicsMagick/ImageMagick

@bguiz Hello, i tried to use this addon, after starting the server i got

Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-format" "%wx%h" "-" this most likely means the gm/convert binaries can't be found
Error: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-format" "%wx%h" "-" this most likely means the gm/convert binaries can't be found
    at ChildProcess.<anonymous> (/projects/ember-sprite/node_modules/broccoli-sprite/node_modules/node-sprite-generator/node_modules/gm/lib/command.js:299:14)
    at emitOne (events.js:77:13)
    at ChildProcess.emit (events.js:169:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
    at onErrorNT (internal/child_process.js:344:16)
    at doNTCallback2 (node.js:441:9)
    at process._tickCallback (node.js:355:17)

maybe you know how to fix it?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.