Gulp

Gulp is a javascript task runner which helps automate some processes involved in web development. Gulp configuration and tasks are defined in gulpfile.js.

Gulpfile.js

Please open src/gulpfile.js. With srcPaths and destPaths variables you can configure your own src files / distribution site structure.

/*
AppUI Template
Gulp Automated Tasks
*/

// Paths to sources, raw files 
var srcPaths = {
	templates: 'templates/',
	sass: 'scss/',
	js: 'js/',
	img: 'img/',
	fonts: 'fonts/',
	data: './data/',
};


// Paths to production ready files
var destPaths = {
	site: '../dist/',
	css: 'assets/css/',
	js: 'assets/js/',
	img: 'assets/img/',
	fonts: 'assets/fonts/',
};

...

Gulp tasks

After installing Node.js and setting up project folder, open command prompt, cd to project directory and use following commands:

To compile Js files, run gulp js:

gulp js

To compress images, run gulp img:

gulp img

To compile Sass files, run gulp sass:

gulp sass

To render HTML files, run gulp html:

gulp html

gulp html is dependent on some other tasks, so images compression, compiling js will be runned simultaneously.

If you want to automate HTML and Sass compiling, run gulp watch. Files will be automatically compiled after every change.

gulp watch

To escape watch mode, use ctrl+c.

Now you can step forward to Working with Nunjucks templates.