Basic-Gulp-Project-Start

Build your any gulp project from scratch. Default use HTML5 Boilerplate, Bootstrap and also use Jquery for your any website project or start a web-app from scratch. You can customize anything as per your requirements. Just edit your gulpfile.js

How to use this for your any project

First thing first. Download the file as a zip or clone it on your pc and open the command line tool. I will suggest to using Git-Bash, Power-Shell or Cmder for your command line tool.

Next make your systems has installed followings:

• 1. Node with NPM
• 2. Git
• 3. Gulp
• 4. Sass
• 5. Compass (Optional)

Now open up your command line tool and navigate your project directory. And type

npm install

You can see this will download the all dependencies. After finish this you can see a folder called node_modules has been created on your project directory. Now run the tasks form gulpfile.js

Now in your command line tool write

gulp

You can now see every task will running accordingly and a folder called dest has been created in root of your directory.

You can customize any task to edit the gulpfile.js ( for more information visit https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md )

Customization

We all know gulp is more light form grunt.

You can check the gulpfile.js and start any task separately as you want( e.g. you want gulp do SCSS to CSS. You just type separate command form you command line tool for your separate task ).

You can find many plugin on this following link http://gulpjs.com/plugins

So, go ahead and use those plugin to do your workflow easy.

Conclusion

This is very basic gulp boilerplate. You can use this to start your any gulp project.

As you might imagine, there is a lot of leveling up you can do with your build process.

visit http://gulpjs.com

I have use the following for my project

• https://html5boilerplate.com
• https://bootswatch.com/flatly
• http://jquery.com
• http://modernizr.com

Enjoy your development workflow with gulp. Feel free to customize the gulpfile.js. So, keep doing the awesome things with gulp.

Note: You can also use BrowserSync for your project. You can find all details http://www.browsersync.io/docs/gulp BrowserSync is awesome for your workflow and testing.

---

Now I have updated the Gulpfile.js. You can now automation your many scripts form diffrent source to use your automation process. I have used gulp merge2 (https://www.npmjs.com/package/merge2).

Now enjoy your full automation process with gulp js