I noticed that every time I started a new project I was rebuilding the same gulpfile.js that I had used in my previous project, and with very similar requirements as well. This process becomes tiresome after awhile, so I decided that something had to be done for to fix it.

• Download or clone this repo with git clone https://github.com/brandonb927/gulp-boilerplate.git
• Run npm install to install the dev dependencies

This boilerplate comes bundled with Normalize.css and a basic structure for architecting your styles and scripts.

Simply run gulp. This nets you:

• BrowserSync with livereload for cross-browser synchronized testing
• LESS CSS preprocessor
• rem to px support for older browsers, write in rems and have px automatically generated when compiled
• Autoprefixer support for prefix-free LESS/CSS
• Bower support for other front-end dependencies (comes with DOMtastic, a lightweight jQuery alternative)
• Filesystem watchers to recompile LESS/CSS/JS on file changes
• Outputted CSS/JS can be minified and compressed, while retaining sourcemaps
• JS Linting
• Image/SVG optimization

This is the default and only main task, however you can run the individual tasks themselves if you need to.

Example:

gulp browser-sync

The command above will run the browsersync server by itself. There are a few more tasks, be sure to check out the gulpfile for more.

MIT