This has been forked from Gulp Starter
Skcript Gulp Starter
Skcript's very own Gulp Starter Kit for faster Front-End Development.
Latest updates -
Added Site Accent Colors and Some Macros.
Added all the meta tags and updated global.json file.
Added Static files such as 404, humans.txt, manifest.json and robots.txt.
Added another page to HTML (about page).
Added browserupgrade message on IE8.
Added main_header_classes for HTML Pages.
|CSS||Sass (Libsass via node-sass), Autoprefixer, CSSNano, Source Maps|
|HTML||Nunjucks, gulp-data, or bring your own|
|Images||Compression with imagemin|
|Icons||Auto-generated SVG Sprites and/or Icon Fonts|
|Live Updating||BrowserSync, Webpack Dev Middleware, Webpack Hot Middleware|
|Production Builds||JS and CSS are uglified and minified, filename md5 hashing (reving), file size reporting, local production Express server for testing builds.|
|JS Testing||Karma, Mocha, Chai, and Sinon, Example Travis CI integration|
Run development tasks:
npm run gulp,
npm run development
Run in tests in watch mode:
npm run test:watch
Run tests once:
npm run test
Build production files:
npm run production
Directory and top level settings are convienently exposed in
gulpfile.js/config.json. Use this file to update paths to match the directory structure of your project, and to adjust task options.
All task configuration objects have
dest directories specfied. These are relative to
root.dest respectively. Each configuration also has an extensions array. This is used for file watching, and file deleting/replacing.
If there is a feature you do not wish to use on your project, simply delete the configuration, and the task will be skipped.
Not all configuration is exposed here. For advanced task configuration, you can always edit the tasks themselves in
Start compiling, serving, and watching files
npm run gulp
npm run development)
./node_modules/bin, using the version installed with this project, rather than a globally installed instance. All commands in the package.json
scripts work this way. The
gulp command runs the
default task, defined in
All files will compile in development mode (uncompressed with source maps). BrowserSync will serve up files to
localhost:3000 and will stream live changes to the code and assets to all connected browsers. Don't forget about the additional BrowserSync tools available on
To run any other existing task, simply add the task name after the
gulp command. Example:
npm run gulp production
Additional Task Details
Build production-ready files
npm run production
This will compile revisioned and compressed files to
./public. To build production files and preview them locally, run
npm run demo
This will start a static server that serves your production files to http://localhost:5000. This is primarily meant as a way to preview your production build locally, not necessarily for use as a live production server.
npm run test
Test files located in
__tests__ folders are picked up and run using
Karma, Mocha, Chai, and Sinon. The test script right now first compiles a production build, and then, if successful runs Karma. This is nice when using something like Travis CI in that if an error occurs during the build step, Travis alerts me that it failed. To pass, the files have to compile properly AND pass the JS tests.
Deploy to gh-pages
npm run deploy
This task compiles production code and then uses gulp-gh-pages to push the contents of your
dest.root to a
gh-pages (or other specified) branch, viewable at http://[your-username].github.io/[your-repo-name]. Be sure to update the
homepage property in your