jueves, 10 de octubre de 2013

Including Plone Mockup in your own project ( Part 2 )

2 months ago, I wrote a blog post: Including Plone Mockup in your own project, and now, after some feedback from people trying it, and work done in the sprints after PloneConf 2013, I'm writing this new entry with changes from the recent version (0.0.4) of the package.

Version Bugfix

The generator allowed to use any format for versioning, and 'npm install' complains if the version is not in the X.Y.Z format. So now, if you specify a version shorter, the generator will add ".0" as necessary at the end. If it is longer, it will remove the extra ones. For example:
  • "1" -> "1.0.0"
  • "1.2" -> "1.2.0"
  • "" -> "0.2.0"

UglifyJS, CssMin and LESS

Up to now, the package was generating a widgets.min.js, giving the wrong impression that this was a minified Javascript, when it wasn't the case. Now, not only the name was changed to "bundle", but also, you will get, after compiling, a "bundle.js" and a "bundle.min.js", the latter being the uglified version of the first one.

Also, after running "grunt", you will get a "bundle.css", which is generated from "less/bundle.less", and a "bundle.min.css", which is the minified version, of course.
At this point, this file includes everything from the mockup project, you should modify it to include any specific you might need.

Development Mode

Before 0.0.4, you needed to compile your changes to your patterns/bundle, and then with the compiled Javascript file, test it in your project.
This is no longer the case. Now, there's a new folder created, called "dev", where you will find a "dev.html" and a "dev.js" files.
You don't need to pay much attention to dev.js, this is what will include require.js and configure it, to import your bundle with its dependencies.

So, now to develop your pattern, all you need to do is add relevant HTML code to "dev.html" and open the file with your browser.
Any change you do to your patterns/bundle will get reflected in the browser with just a refresh.

Finally, when everything is ready, you can compile as usual and include your compiled Javascript into your project, as usual.

Test Skeleton

From version 0.0.4, all the configuration needed to run tests, and a test skeleton is already included after "yo" finishes. All you need to do is go to the "tests" folder, open the "pattern-[something]-test.js" file, add some tests, save the file, and then from the package, run "grunt test".
If instead of "PhantomJS", you would like tests to be run using Chrome (or Chromium), just run "grunt karma:dev_chrome"

Minor Changes

  • As mentioned before, the bundle file is no longer called "widgets.js", but, "bundle.js".
    Also the compiled files are called "bundle".
  • Now the generator, includes a README.md, so 'npm install' doesn't give a warning about it.

Known Bugs

Do not use spaces for neither your project name, or pattern name.

Happy mock'ing ! :)