I recently found out about Apostrophe CMS when I was searching for a Wordpress/TYPO 3 alternative and I must say, I'm really impressed! Needless to say, I'm also a bit overwhelmed with all the stuff that is coming together in this huge framework.
So my question is: how do I combine my existing gulp project with hot-reload, sass-stylesheets etc. with Apostrophe in the most efficient way?
I figured Apostrophe would work pretty well with the technology I'm already using, but there also seems to be no documentation on how to do something like this.
Thanks in advance!
You can put the custom front end source files wherever (src
or frontend
in the root is popular). You'll push it with self.pushAsset
in the module where you've output the built assets. There's some more about this in the docs for the apostrophe-assets
module. (this could certainly be wrapped up better for new devs)
As it says there, front end assets not specific to a particular module (e.g., player JS for your custom carousel widget) should still go in a module you own. An assets
module is a good choice (you have to declare it in app.js
like the others). So you might have something like:
// in lib/modules/assets/index.js
module.exports = {
construct: function(self, options) {
self.pushAsset('stylesheet', 'styles', { when: 'always' });
}
}
styles
there as the name
argument indicates that the file name is styles.css
(your output file from the build). Since the type is stylesheet
, this file is located in the assets module public CSS directory, lib/modules/assets/public/css/styles.css
. That's covered in the pushAsset
docs linked above.