Idea Ninja's Build System Available

Author: Miguel Teixeira
2015-09-4
Tags: development, build system, website



Starting now Idea Ninja has made available on Github its build system free to use, making developing your startup website a lot simpler and faster.

How does the build system work ?

A build system exists to make your programming a lot easier.  Basically is a set of programmed tasks that run on your code to do things like:

  • Prepare your build,
  • Minimize your code,
  • Compile templates into pages,
  • build a sitemap xml,
  • build a Robot.txt,
  • move files around.

These rules run on an application that will run the tasks in pipeline automatically according to the rules you defined.

build

Where can you find it ?

You can find here our build system. What you want to do is to download the gulp.js file, that contains all the rules that define your build system. Make sure you install Nodejs first and all the NPM modules mentioned in the readme file and then to run you just type gulp in the command line.

What will it do ?

It will compile your code from:

  • ejs to html,
  • scss (compass) to css,

It will concatenate your javascript scripts into a unique scripts.js, optimize your images files, create and populate your build folders. It will apply a different set of rules if you run it in production or development.  It assumes the you are using the following file structure:

  • your ejs files should be inside a templates folder,
  • your pictures inside components/images (you can use subfolders),
  • your scss files should be inside the components/sass folder
  • your script files inside your components/scripts

How will it behave ?

After you have run the gulp command in your bash, note you must be in the same folder as your gulp.js file, it will run all the tasks mentioned above and will watch the folders. If there is any change to the folders it will compile them into and place them inside the build.

Does it have parameters ?

Yes. You can define if you want to compile to production or development manipulating the variable env. The two options are already there, but one is commented:
env = 'production';
//env = 'development';

You can also identify which js scripts you want to concatenate and as an example we left it with a few defined:
jsSources = [
  'components/scripts/jquery.js',
 'components/scripts/jqloader.js',
  'components/scripts/transitions-bootstrap.js',
  'components/scripts/modal-bootstrap.js',
  'components/scripts/script.js'
];

 You can also define which pages you do not want the robots to crawl and we left as example that it should not crawl our contact us page:
gulp.task('robots', function () {
  gulp.src('builds/development/*.html')
   .pipe(robots({
  useragent: '*',
  out: outputDir + 'robots.txt',
  disallow: ['/contactus.html']
   }))

 You must define your website's url so that the sitemap is correctly produced, and once again we left the idea Ninja's website as an example:
gulp.task('sitemap', function () {
  return gulp.src(outputDir + '*.html')
   .pipe(sitemap({ siteUrl: 'https://ideaninja.io' }))
   .pipe(gulp.dest(outputDir));
});

What files can it moves around ?

It can move any file you wish. We left an example to move the file countable.js to the scripts folder in the build:
gulp.task('move', function() {
  return gulp.src('components/scripts/countable.js')
   .pipe(gulp.dest(outputDir+ 'js'))
  });

you should customize this!

Other references

If you have any doubt on how to work with this build system or suggestions on how to improve it, we would love to hear from you. Drop us a line in our contact us page. If you are interested the ideaninja's template is also available in this github repository We hope this will help you speed up the development of your startup's website.

Contact Us

Please feel free to participate. We want to hear from you. We want your feedback and input. contact us Here