Gulp Generators

914 views
Skip to first unread message

Matthew Marino

unread,
Aug 6, 2014, 6:49:21 PM8/6/14
to sai...@googlegroups.com
I have created some gulp generators and would like to get some feedback/ideas. The generators still need a little bit of work, but they do what they're supposed to. I also fixed it so that sails lift works with gulp.

$ npm install -g sails-generate-backend-gulp
$ npm install -g sails-generate-gulpfile
$ npm install -g sails-generate-frontend-gulp
$ npm install -g sails-generate-new-gulp

add this to .sailsrc file in working directory

{
    "generators": {
        "modules": {
            "new": "sails-generate-new-gulp",
            "frontend": "sails-generate-frontend-gulp",
           "backend": "sails-generate-backend-gulp",
           "gruntfile": "sails-generate-gulpfile"
        }
    }
}

I added a growl function to the gulp tasks that show with growl.

Rob Wormald

unread,
Aug 6, 2014, 8:20:44 PM8/6/14
to Matthew Marino, sai...@googlegroups.com
awesome. sauce. will try out!

Matthew Marino

unread,
Aug 6, 2014, 8:25:37 PM8/6/14
to sai...@googlegroups.com, matthe...@gmail.com
Thanks.they still have some work to be done on them. i'm open to help and ideas.

Matthew Marino

unread,
Aug 8, 2014, 2:50:49 AM8/8/14
to sai...@googlegroups.com

Just did a major overhaul on the gulp generators. Except for jade, tasks work the same as the grunt versions.
Message has been deleted

Petr Nevyhoštěný

unread,
Aug 11, 2014, 2:26:57 PM8/11/14
to sai...@googlegroups.com
Thank you for this. I've already tried it and really like it. But when I have Sails app lifted and change a file or lower the app and then lift it again, it throws "Gulp :: Error: ENOENT, stat '/path/to/app/.tmp/public/<random file>'". After some tests it seems that clean task causes these problems because when I remove code of clean task, no error occurs. If I manually delete the "public" folder in ".tmp", it works fine. Any ideas?

Dne čtvrtek, 7. srpna 2014 0:49:21 UTC+2 Matthew Marino napsal(a):

Petr Nevyhoštěný

unread,
Aug 12, 2014, 10:09:48 AM8/12/14
to sai...@googlegroups.com
It seems I have found solution for my problem. I just changed source path in clean task to ".tmp/public/**/*.*" and it works fine.

Petr Nevyhoštěný

unread,
Aug 12, 2014, 10:32:54 AM8/12/14
to sai...@googlegroups.com
Except it doesn't clean folders, just files. Oh, I should think more before I say something. But I hope it will help to find a solution.

Matthew Marino

unread,
Aug 12, 2014, 7:41:00 PM8/12/14
to sai...@googlegroups.com
Hi all, I fixed a lot of tasks and changed things around drastically. I also added bower support npm install -g sails-generate-bower-gulp. All should be working now, be sure to add the sails-generator-bower-gulp to the project .sailsrc file.

Fixes:

  • tasks now use run-sequence for proper task sequencing
  • fixed cleaning of folders (it clears the public folder and everything in it)
  • added bower support (it will both download and copy bower files to a vendor folder in assets folder)
please update your modules for the enhancements. :)

Matthew Marino

unread,
Aug 13, 2014, 2:41:00 PM8/13/14
to sai...@googlegroups.com
Just added toggle for gulp-notify, default is off for app build/run process. To enable, change growl = false to true in the gulpfile.js

Matthew Marino

unread,
Aug 14, 2014, 3:14:30 PM8/14/14
to sai...@googlegroups.com
the fix would be replacing ".tmp/public/**/**" line with ['.tmp/public/**/*.*', '.tmp/public{,/**}']

I updated the task in package.

Matthew Marino

unread,
Aug 17, 2014, 1:14:30 AM8/17/14
to sai...@googlegroups.com
Generators are ready for use. There will bee feature enhancements along the way, but they seem stable.

I am currently creating an advanced activityOverlord app that will feature my generators, along with an interesting project called waterlock. If you're interested, check back for updates on when the demo is live, I'll post it here.

Matthew Marino

unread,
Aug 18, 2014, 1:03:31 AM8/18/14
to sai...@googlegroups.com
I created a demo my gulp generators using activityOverlord, sails v10.4, waterlock and the newest bootstrap/bootstrapValidator packages. It can be found here if anyone would like to try it.

Denny Trebbin

unread,
Sep 3, 2014, 2:27:31 PM9/3/14
to sai...@googlegroups.com
pretty cool!
some active directory connection would help me very much.

Rob Wormald

unread,
Sep 3, 2014, 2:31:19 PM9/3/14
to Denny Trebbin, sai...@googlegroups.com
ActiveDirectory sounds like the *perfect* use case for a custom adapter….

Matthew Marino

unread,
Sep 3, 2014, 4:50:03 PM9/3/14
to sai...@googlegroups.com
Yeah, I was thinking about adding passport Active directory connection for this, just haven't gotten around to it yet... I'll add it in the next rev of GAOWL project.

I'm playing with angular and the best way to use it with sails...

Denny Trebbin

unread,
Sep 4, 2014, 9:57:09 AM9/4/14
to sai...@googlegroups.com
waterlock is pretty cool.
tried it today at work and i was ready in few minutes.

we are migrating to ad now. i have no time schedule when our ad team is done with it.
but it would be cool to have waterlock adapter for ad.

and i am not playing with angular. i do reactjs.

Matthew Marino

unread,
Sep 4, 2014, 2:21:54 PM9/4/14
to sai...@googlegroups.com
Well, I'm not the author of waterlock, just a user and partial contributor. Instead of using the waterlock adapters I decided to go with passport for 3rd party authentication. An example of this would be here (GAOWLPass). I also started using sails-generate-auth, which makes passport really easy. Passport has ldap and ad authentication modules that should work.

Matthew Marino

unread,
Sep 6, 2014, 12:52:52 AM9/6/14
to sai...@googlegroups.com
New generator added to the suit, Angular. This generator further enhances the gulp suit by generating what is needed to get off the ground fast with angular and my other sails gulp generators.

Matthew Marino

unread,
Sep 24, 2014, 2:07:15 PM9/24/14
to sai...@googlegroups.com
I am working on a new angular generator that uses gulp-webserver for a secondary web server addition to sails. What it will do is create a web server for angular to app to run on (no more need to put angular apps in the sails routes.js) and runs as a child process. This is the first step in creating an angular solution that will have a configurable secondary web server that can be started/stopped/restarted from the angular web interface without affecting the sails server. The goal is to make the system independent of one another, yet both load on one sails lift command. This will enable the angular app to still function if the sails server crashes and vice verse if the angular app crashes.

Matthew Marino

unread,
Sep 24, 2014, 8:00:07 PM9/24/14
to sai...@googlegroups.com
Anyone want to help me with these generators? I just about finished the new angular generator and need to do a major re-factor of all generators to enhance them and clean them up. Email me or post on one of the sails gulp generators at https://github.com/Karnith. all sails generators are prefixed with sails-generate-gulp ,there are soon to be 7 of them. Could really use the help with this and documentation also. :)

Thx

Matthew Marino

unread,
Sep 24, 2014, 9:46:39 PM9/24/14
to sai...@googlegroups.com
New angular generator complete


This generator is different from the original sails-generate-angular-gulp as it does some massive changes to gulp tasks, uses .tmp only for the local database, creates an app folder in project root tied to the new gulp tasks and biggest change of all....

Creates a web server for angular to use!

This web server, for now, starts with the sails server and stops with the sails server (future revs will separate the two). It provides a "proper" ecosystem for angular to run (no hacks for sails use) and uses sockets for communication with sails via proxy.

Let me know what you think and if there's any issues..

Andreas Heintze

unread,
Oct 1, 2014, 3:53:06 PM10/1/14
to sai...@googlegroups.com
Hi! I installed your generators as of below, but when I start it up by running sails lift I get an error message saying:

error: 

------------------------------------------------------------------------

grunt-cli: The grunt command line interface. (v0.1.13)


Fatal error: Unable to find local grunt.


If you're seeing this message, either a Gruntfile wasn't found or grunt

hasn't been installed locally to your project. For more information about

installing and configuring grunt, please see the Getting Started guide:


http://gruntjs.com/getting-started

Ambroise Dhenain

unread,
Oct 1, 2014, 3:57:59 PM10/1/14
to Andreas Heintze, sai...@googlegroups.com
Try to instal it:

npm install grunt-cli -g
--
Cordialement,

M. Ambroise Dhenain.

Andreas Heintze

unread,
Oct 1, 2014, 4:02:58 PM10/1/14
to sai...@googlegroups.com, and...@heintze.se
Doesn't work. It says the problem is that either a gruntfile wasn't found or Grunt hasn't been installed locally. Well there's no gruntfile since we are using Gulp now, so...
Message has been deleted

Matthew Marino

unread,
Oct 2, 2014, 3:53:27 PM10/2/14
to sai...@googlegroups.com, and...@heintze.se
add this to your .sailsrc
{
  "hooks": {
      "grunt": false
  },
  "generators": {
    "modules": {
        
    }
  }
}
I need to fix this in the generator so that it is standard on creation. The issue is derived from the grunt hook in the core sails app. Adding the above should fix it.

Andreas Heintze

unread,
Oct 2, 2014, 3:56:24 PM10/2/14
to sai...@googlegroups.com, and...@heintze.se
Thanks, that did work great!

Andreas Heintze

unread,
Oct 5, 2014, 4:16:02 PM10/5/14
to sai...@googlegroups.com
Hi! I'm using your gulp generators since I prefer Gulp and since I want to modify the tasks a bit I'm going through the code. One odd thing I didn't understand is this. All tasks in tasks/config/sails-linker-gulp.js does first read html-files from the .tmp folder. What is the purpose for this? I can't see any meaning in this.

Also, in watch.js, task 'watch:assets' it reads 'assets/**/**/*', is this just a small mistake? Shouldn't it be just 'assets/**/*'?

I do also see some todo text in the files. Are there some things that's not ready and working as the grunt tasks do?

Thanks!
Andreas

Matthew Marino

unread,
Oct 5, 2014, 6:24:24 PM10/5/14
to sai...@googlegroups.com
I'll have a look. I created the generators quickly, porting from the original grunt tasks. I know I need to refactor some things, just haven't had the opportunity to.

Matthew Marino

unread,
Oct 6, 2014, 12:40:00 AM10/6/14
to sai...@googlegroups.com
Hi Andreas,

the first question as to why sails-linker-gulp reads .tmp folder (I assume you mean sections like [this](https://github.com/Karnith/sails-generate-frontend-gulp/blob/master/templates/tasks/config/sails-linker-gulp.js#L18)) has to do with html files in the .temp folder that may need scripts or css linked to them. It is the same as [this](https://github.com/balderdashy/sails-generate-frontend/blob/master/templates/tasks/config/sails-linker.js#L25-L27) although I still need to work out how to grab the files from their location, append to them and then return them to the location they were received from (e.g. if the file was from .tmp, return file to .tmp updated with the proper linkage of .tmp/path to files/file).

The second question about assets/**/**/* has been corrected a while back, I just haven't pushed to npm yet as I wanted to make some more adjustments before I publish a new version. (see [here](https://github.com/balderdashy/sails-generate-frontend/blob/master/templates/tasks/config/watch.js#L26)).

I haven't tested everything yet with the generators, but am certain that the majority (if not all) of the functionality works. Feel free to let me know if there are any issues with the functionality of the generators in the issues section of the repo and I will investigate/fix. Also please feel free to fork and pr.

Matthew Marino

unread,
Oct 6, 2014, 12:41:16 AM10/6/14
to sai...@googlegroups.com
oops, forgot I was in google group and not posting on git.. :)


On Wednesday, August 6, 2014 3:49:21 PM UTC-7, Matthew Marino wrote:

Andreas Heintze

unread,
Oct 6, 2014, 1:33:07 AM10/6/14
to sai...@googlegroups.com
Yes that's what I meant about the html files in the .tmp folder. The problem with that one is that they are not going to be written back to the same .tmp folder, but to the views folder where they do no good. Ok thanks, then I know I can safely remove these.

Andreas Heintze

unread,
Oct 6, 2014, 2:17:50 AM10/6/14
to sai...@googlegroups.com
I did some changes and it turns out that it is very easy to fix this. With Gulp it is also easier to pipe both JS, CSS and templates into one task like this:

gulp.task('sails-linker-gulp:devViews', function() {
// Read templates
return gulp.src(['views/**/*.html', 'views/**/*.ejs'])
// Link the JavaScript
.pipe(plugins.linker({
scripts: [require('../pipeline').jsFilesToInject],
startTag: '<!--SCRIPTS-->',
endTag: '<!--SCRIPTS END-->',
fileTmpl: '<script src="%s"></script>',
appRoot: '.tmp/public'
}))
// Link the CSS
.pipe(plugins.linker({
scripts: [require('../pipeline').cssFilesToInject],
startTag: '<!--STYLES-->',
endTag: '<!--STYLES END-->',
fileTmpl: '<link rel="stylesheet" href="%s">',
appRoot: '.tmp/public'
}))
// Link the JST Templates
.pipe(plugins.linker({
scripts: ['.tmp/public/jst.js'],
startTag: '<!--TEMPLATES-->',
endTag: '<!--TEMPLATES END-->',
fileTmpl: '<script type="text/javascript" src="%s"></script>',
appRoot: '.tmp/public',
}))
// Write modified files to views/
.pipe(gulp.dest('views/'))
.pipe(plugins.if(growl, plugins.notify({ message: 'sails-linker-gulp devViews task complete' })));
});

gulp.task('sails-linker-gulp:devAssets', function() {
// Read templates
return gulp.src('.tmp/public/**/*.html')
// Link the JavaScript
.pipe(plugins.linker({
scripts: [require('../pipeline').jsFilesToInject],
startTag: '<!--SCRIPTS-->',
endTag: '<!--SCRIPTS END-->',
fileTmpl: '<script src="%s"></script>',
appRoot: '.tmp/public'
}))
// Link the CSS
.pipe(plugins.linker({
scripts: [require('../pipeline').cssFilesToInject],
startTag: '<!--STYLES-->',
endTag: '<!--STYLES END-->',
fileTmpl: '<link rel="stylesheet" href="%s">',
appRoot: '.tmp/public'
}))
// Link the JST Templates
.pipe(plugins.linker({
scripts: ['.tmp/public/jst.js'],
startTag: '<!--TEMPLATES-->',
endTag: '<!--TEMPLATES END-->',
fileTmpl: '<script type="text/javascript" src="%s"></script>',
appRoot: '.tmp/public',
}))
// Write modified files to views/
.pipe(gulp.dest('.tmp/public/'))
.pipe(plugins.if(growl, plugins.notify({ message: 'sails-linker-gulp devAssets task complete' })));
});

As you can see I renamed the tasks and then you also need to update linkAssets.js to call these tasks instead.

Matthew Marino

unread,
Oct 9, 2014, 2:22:52 PM10/9/14
to sai...@googlegroups.com
Thanks for this Andreas. I'll look at usign this in teh next version. :)

Andreas Heintze

unread,
Oct 13, 2014, 5:56:14 PM10/13/14
to sai...@googlegroups.com
Looks like it's just "sails lift" that works.
I've tried "sails www", "sails lift --prod", "sails www --prod", but none of these seems to work. Can you make them work too?

kamiyam

unread,
Oct 13, 2014, 8:39:26 PM10/13/14
to sai...@googlegroups.com
There was that earlier, the error occurred in my environment 

you used a gulp by "generator" is 

tasks / config / concat.js is defined in this way 
`` `
concat: css 
concat: js 
`` `

So 
`` `
// Mod tasks / register / prod.js 
concat: css 
concat: js 
`` `
It might be better if you change as described above 


Other 
`` `
'uglify: dist', 
'cssmin: dist', 
  `` `
There was a case that 

`` `
// Mod tasks / register / prod.js 

'uglify: dist', 
'cssmin: dist', 
`` `

If different, then I want you to attach the error message 

`` `
sails lift --prod --verbose 
`` `

2014年10月14日火曜日 6時56分14秒 UTC+9 Andreas Heintze:

Matthew Marino

unread,
Oct 13, 2014, 8:52:18 PM10/13/14
to sai...@googlegroups.com
Yeah, i've been working on this when I can. Development has slowed due to things really picking up at work, but I'll try to get things working when I can.

Andreas Heintze

unread,
Oct 14, 2014, 1:49:16 AM10/14/14
to sai...@googlegroups.com
Where in the code are these hooks so I can for example get "sails www" to work as "gulp build"?
When running "sails build" etc... I saw that there where some errors, but these where easy to solve, since it was just to change the name of the tasks. For example, buildProd.js should read:

module.exports = function (gulp, plugins) {
gulp.task('buildProd', function(cb) {
plugins.sequence(
'compileAssets',
'concat:js',
'concat:css',
'uglify:dist',
'cssmin:dist',
'linkAssetsBuildProd',
'clean:build',
'copy:build',
cb
);
});
};


..and prod.'s should read:

module.exports = function (gulp, plugins) {
gulp.task('prod', function(cb) {
plugins.sequence(
'compileAssets',
'concat:js',
'concat:css',
'uglify:dist',
'cssmin:dist',
'sails-linker-gulp:prodAssets',
'sails-linker-gulp:prodViews',
cb
);
});
};


Now I can make it all work using the gulp command, but I would like it to work with the sails commands too.

There where also some warnings from jshint that is running in concat.js on the file sails.io.js, but that's only warnings, but I think it should have been fixed by the sails team.

Matthew Marino

unread,
Oct 14, 2014, 4:53:28 PM10/14/14
to sai...@googlegroups.com
This is somewhere in the sails source. What I did was convert the grunt tasks to gulp. I'd need to dig into the sails generator source to find this.

Matthew Marino

unread,
Oct 15, 2014, 5:58:00 PM10/15/14
to sai...@googlegroups.com
I'm going to be doing some major re-factoring of all the generators, improving things and making things more configurable in the upcoming versions, stay tuned!

Matthew Marino

unread,
Oct 16, 2014, 8:46:36 AM10/16/14
to sai...@googlegroups.com
I've created a dev branch for all my generators. Please pr to the dev branch so the working branch (master) isn't affected. PRs will be pushed to master once dev version is ready.

Matthew Marino

unread,
Oct 16, 2014, 9:02:20 AM10/16/14
to sai...@googlegroups.com
Also, please use the issues section for all issues so I can track them easier. The links are below for your convenience:

  1. sails-generate-new-gulp issues
  2. sails-generate-gulpfile issues
  3. sails-generate-backend-gulp issues
  4. sails-generate-frontend-gulp issues
  5. sails-generate-bower-gulp issues
  6. sails-generate-angular-gulp issues
  7. sails-generate-angular-gws issues
For standard sails using gulp, numbers 1 - 4 is needed.
For sails gulp and angular standard (no additional web server added, uses sails public path for hosting angular), numbers 1 - 6 are needed.
For sails gulp and angular web server, numbers 1 - 5 and 7 are needed (has addition of a web server integrated into sails, separating front end angular app from back end sails api. Everything works with sails lift).

Matthew Marino

unread,
Sep 24, 2015, 5:05:24 PM9/24/15
to sails.js
Hi All,

I just released the first version of my sailsgulpify machine pack


What this machine pack does is add gulp to a project and allow you to toggle between gulp and grunt engines. The machine pack will also add all the gulp dependencies needed to run.

For those that know of or used my generators in the past, they are now depreciated and will no longer be developed. This is the new way to add gulp to your projects.

TODOS:

  • Find a way to add the toggleEngine.js to the root of the project after machine pack is installed

I will be converting my angular generatoes to machine pack also, so keep an eye out for them.

~Karnith
Reply all
Reply to author
Forward
0 new messages