Gulpstrap provides a clean starter kit with some basic Gulp tasks for your application including some common CSS, JavaScript and even testing tools!

• Features
• What's included
• Available Gulp Commands
• Installation
• Setup your project
• Configuration
• Contributing

• Copying Files
• Compress Images
• Compiling Less
• Compiling Sass/Compass
• Hinting Your Javascript
• Combine Your Javascript
• Watching Files For Changes

• Minification CSS / Javascript
• Autoprefixer CSS
• Apache HTTP server boilerplate configs
• Runs a sequence of gulp tasks
• Notification

Within the download you'll find the following directories and files. You'll see something like this:

gulpstrap/
├── gulp/
│   ├── tasks/
│   │   ├── clean.js
│   │   ├── copy.js
│   │   ├── default.js
│   │   ├── images.js
│   │   ├── less.js
│   │   ├── lint.js
│   │   ├── sass.js
│   │   ├── scripts.js
│   │   ├── watch.js
│   ├── config.js
├── gulpfile.js
└── package.json

• gulp — Default task
• gulp copy — Copying files
• gulp clean — Cleaning output
• gulp images — Lossless compression of PNG, JPEG, GIF and SVG images
• gulp less — Compile LESS to CSS
• gulp sass — Compile Sass to CSS
• gulp lint — Hinting your JavaScript
• gulp scripts — Combine / Minify your JavaScript
• gulp watch - Watching assets when file changes are made

Prerequisites Node.js, NPM & Gulp are the absolute requirements. If you have any trouble installing it, refer to the documentation for help.

Clone the git repo - git clone https://github.com/yasinkocak/gulpstrap.git - or download it and then rename the directory to the name of your project.

Install NPM dependencies npm install

For this example, our project files will be contained in a folder named app — the location of pre-processed HTML source files and folders Our app folder contains the following sub-folders:

• assets
  • images — uncompressed images
  • scripts — multiple pre-processed script files
  • sass — multiple pre-processed Sass files

If you want Less instead of Sass create less directory in assets

Edit gulp/config.js to set up your project.

Define your build and src directory:

var dest = './public',
	src = './app';

There are default objects

• tasks — Which tasks will be fired when gulp is executed
• watchers — Which will be watch when gulp watch is executed
• assets — Locations and options of scripts, styles and images
• duplicate — Which files will be copied when gulp copy is executed
• lint — Which JavaScripts will be hinting when gulp lint is executed
• clean — Which directories will be clean when gulp clean is executed

module.exports = {

	// Which tasks will be fired when default task is executed?
	tasks: [],

	// Which will be watch?
	watchers: {},

	// Scripts and styles.
	assets: { css: {}, js: {}, images: {} },

	// Files to be copied
	duplicate: [],

	// Hinting Your Javascript
	lint: {},

	// Wich directories will be clean?
	clean: [],

	// The default root output directory.
	baseDir: dest
};

Yasin Kocak

• https://github.com/yasinkocak

Everyone is welcome to help contribute and improve this project. There are several ways you can contribute:

• Reporting issues (please read issue guidelines)
• Suggesting new features
• Writing or refactoring code
• Fixing issues

Code and documentation copyright 2014. Code released under the MIT license.