Search code examples
sassgulpapostrophe-cms

Combining new apostrophe-cms project with existing Gulp.js project


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!


Solution

  • 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.