reedd / node-assetmanager Goto Github PK

`{% for file in assets.main.css %}

{% endfor %}

{% for file in assets.main.js %}
<script type="text/javascript" src="{{file}}"></script>
{% endfor %}`

replace to .jade ?

Can the resource static url have a timestamp paramters?

I have my assets in the /assets instead of the /public directory. Does this tool offer me the chance to get them on the /assets directory and importing them to a jade for example without any problems? If so is it the same way that you represent in the examples given?

Thanks in advance.

Hi, this is not an issue. It's rather a discussion on the features.

• You handle the case when an asset is an external URL. In most cases they point to a CDN which are already minified. On MEAN, when running "grunt uglify", these files will also be included in dist.min.js? I'm thinking of using assets.js instead of assets.json in MEAN to have more flexibilities on which file I should included in assets.js and assets.css based on current environment. What do you think?
• Do you think that images should also be considered as assets? I would like to serve image via a CDN to minimize the load time.

Hi.

Library is awesome, but it has one smaaaaall performance bug...

In prodaction environment for _EVERY_ request (even for static files) library calculate MD5 for _ALL_ sorces assets files. I replaced one file to another (20М just for fun) and server has gone mad.

At high load, even with small files, it's very critical.

Solution: i think best way use in url hash last modify or MD5 from size and last modify assets files (NOT sources). You can chage sources, but in productionfile does not change. Why you need change hash?

Thanks.

My project contains multiple single page applications, and I may need to include different scripts base on different spa.

For example, all my spa require angularjs and their own scripts which contains the logic.

I will set my assets.json like this:

  "js": {
    "base": {
      "xxx.dist.min.js": [
        "jquery",
        "angularjs"
      ]
    },
    "app1": {
      "app1.dist.min.js": [
        "xxxx"
      ]
    },
    "app2": {}
  }

And I'm looking for a way to use assetmanager to get this done.

  assetmanager.init({
    js: assets.js,
    css: assets.css,
    debug: (process.env.NODE_ENV !== 'production'),
    webroot: 'public/public'
  });

Looks like assetmanager currently just concat all the js/css files, it's a quite simple and understandable solution.

But would it be better if we consider more complicated situations ?
Pls tell me if I get something wrong.

assetmanager currently uses grunt's file object format in the assets json file, so in the gruntfile assets are configured in concat (for example) as follows:

concat: {
  main: {
    files: '<%= assets.main.css %>'
  },
}

This precludes the possibility of listing multiple destination files:

concat: {
  main: {
    files: {
      '<%= assets.vendor.css %>',
      '<%= assets.vendor.js %>'
    }
  },
}

The above doesn't work because the syntax is incorrect.

Using the css section as an example, I propose changing the format of assetmanager's assets json from this:

        "css": {
            "public/build/css/main.min.css": [
                "public/lib/bootstrap/dist/css/bootstrap.css",
                "public/css/**/*.css"
            ]
        },

to this (grunt's file array format):

        "css": [
            {
                "src": [
                    "public/lib/bootstrap/dist/css/bootstrap.css",
                    "public/css/**/*.css"
                ],
                "dest": "public/build/css/main.min.css"
            }
        ],

Note that "css" is now an array of objects, each of which have a "src" array of source files, and "dest" string for the destination file.

This would allow configuring one grunt target with multiple file sets. For example, I'd like to use concat on vendor-minified files, css and js, and use uglify on my client css and js.

The alternative is a grunt target for every destination file.

It is often necessary to preserve cachebust strings when no modifications actually occurred to specific assets. A good approach for production is to read a file (or remote resource), calculate an MD5 digest (or similar) and take a handful of first characters.

This could be done synchronously, since most apps would require fingerprinting only in production (or in build scripts).

Hey there,

I've tried following you're instructions by using an assets.json and creating a grunt.js file but whenever I switch my app to production mode, it's referencing the built folder but there's actually nothing in it.

My assets.json:

{
  "main": {
    "css": {
      "public/compiled/css/app.css": [
        "public/foundation/css/webfonts/font-awesome-4.3.0/css/font-awesome.min.css",
        "public/javascripts/angularjs/angular-ui-tree-master/dist/angular-ui-tree.min.css",
        "public/javascripts/angularjs/angular-tablesort-master/tablesort.css",
        "public/javascripts/angularjs/datatables/css/datatables.css",
        "public/javascripts/angularjs/dropzone-master/dist/dropzone.css",
        "public/javascripts/angularjs/dropzone-master/dist/basic.css",
        "public/javascripts//toastr-master/toastr.css",
        "public/javascripts/angularjs/sweetalert-master/lib/sweet-alert.css",
        "public/foundation/css/app.css",
        "public/javascripts/foundation-datepicker-master/stylesheets/foundation-datepicker.css"
      ]
    },
    "js": {
      "public/compiled/js/app.js": [
        "public/javascripts/angularjs/underscore-min.js",
        "public/foundation/bower_components/modernizr/modernizr.js",
        "public/foundation/bower_components/jquery/dist/jquery.min.js",
        "public/javascripts/angularjs/tinymce/js/tinymce/tinymce.min.js"
      ]
    }
  }
}

My gruntfile.js, I put this in the root directory of my project (not sure where to put it):

module.exports = function (grunt) {
    // Project Configuration
    grunt.initConfig({
        assets: grunt.file.readJSON('config/assets.json'),
        uglify: {
            main: {
                options: {
                    mangle: true,
                    compress: true
                },
                files: '<%= assets.main.js %>'
            }
        },
        cssmin: {
            main: {
                files: '<%= assets.main.css %>'
            }
        }
    });

    //Load NPM tasks
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //Making grunt default to force in order not to break the project.
    grunt.option('force', true);

    //Default task(s).
    grunt.registerTask('default', ['cssmin', 'uglify']);

};

My app.js:

// Process your assets file
var assets = assetmanager.process({
    assets: require(__dirname + '/config/assets.json'),
    debug: false,
    webroot: 'public'
});

Like i said everything works well in development mode, but it's not getting compiled in production mode. If I run "grunt build" in the root dir where the "gruntfile.js" is located, it returns saying "task build" not found.

What am I doing wrong?

Cheers,
Ben

Reverting to 1.1.2 works fine:
Error: Unable to read "public/*/*.module.js" file (Error code: ENOENT)
Any ideas where that could come from?