Build Tools

Learn how to customize Looper Theme. You will be able to quickly scaffold your theme and start developing.

Tooling setup

Looper used gulp for its build system. To use the build system and run both Demo and Documentation locally, make sure your system has the following:

Node version > 8.x and < 10.x
Gulp CLI: npm install -g gulp-cli

Assuming that your system have the above requirements. Then open your command line and navigate to Looper directory, now you need to run:

npm install

Finally, once everything is done, you’ll be able to run the various tasks provided from the command line.

Gulp tasks

While customizing Looper everything you change will automatically be updated and injected into your browser. Changing SCSS or JavaScript files will automatically updated them, create sourcemaps and inject them. Writing or editing demo pages nor your own pages will do the same. All is done with single gulp task. simple and effective!

If you are not familiar with Gulp, please take a look at this beginners guide.

Our gulpfile.js includes all of the tasks and subtasks that named after what they do. You can edit or look at any of them to see how they actually work. They're all commented. Below are some of the tasks you will use often:

Task	Description
`gulp build`	Creates HTML files, builds assets, copied dependencies into `.tmp` directory.
`gulp serve`	Open up Looper demo pages in your browser and watch for changes.
`gulp`	This is the default command, and probably the one you'll use the most. This command will build all assets and pages then serves it. As you are changing your pages and assets they will automatically update and inject into your browser via BrowserSync.
`gulp docs`	Build the documentation and open up in your browser.
`gulp dist`	When you are done customizing you can have your assets optimized and injected correctly into your HTML. Your assets will be prettified, minified, compressed with gzip, cache busted and otherwise optimized. All of pages, assets, and documentation will stored in `dist` directory.
`gulp clean`	Deletes your assets and all of build files from their `.tmp` directory as well as in `dist` and deletes any gzipped files.

Heads up! We used Liquid Markup to generate html templates with simple logic and load dynamic content in build process. So we can separate our templates into small parts, making it easier to maintenance. Please see the Liquid Markup site to see what you can do with it.

We also used FrontMatter in build process to handle our meta-data from html document and our dummy data from .json file.

This work like a static site generator. If you've heard about Jekyll, then you will know that we adopt a similar technology.