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.