Русская версия находится в файле README.ru.md.

Online store development with Gulp

Description

In this repository there is a example of online store development with Gulp.

In the template to use Pug and Stylus preprocessors.

Requirements

1. Node.js.
2. Node.js Packet Manager (NPM).
3. Gulp.
4. Git.
5. Git Bash — for Windows users.
6. Bower.

Use the template

1. Cloning of the project:

git clone https://github.com/mikorn/gulp-online-store.git --depth 1 my-gulp-online-store

Farther go to the folder:

cd my-gulp-online-store

2. Installing of npm-dependencies:

npm install

Or:

npm i

3. Installing of bower-dependencies:

bower install

or:

bower i

The template is ready for development.

Development

Project sctructure:

project/
|------/app/
|----------/assets/
|-----------------/css/
|---------------------/common.min.css
|---------------------/common.css
|---------------------/vendor.min.css
|-----------------/fonts/
|-----------------/images/
|-----------------/js/
|--------------------/common.min.js
|--------------------/common.js
|--------------------/vendor.min.js
|----------/blocks/
|-----------------/block-1/
|-------------------------/block-1.js
|-------------------------/block-1.styl
|-----------------/block-2/
|-------------------------/block-2.js
|-------------------------/block-2.styl
|-----------------/block-3/
|-------------------------/block-3.js
|-------------------------/block-3.styl
|----------/materials/
|----------/pug/
|--------------/blocks/
|---------------------/footer.pug
|---------------------/head.pug
|---------------------/header.pug
|---------------------/sidebar.pug
|--------------/layouts/
|----------------------/default.pug
|--------------/pages/
|--------------------/404.pug
|--------------------/about.pug
|--------------------/contacts.pug
|--------------------/index.pug
|--------------------/services.pug
|----------/config/
|-----------------/mixins.styl
|-----------------/variables.styl
|----------/vendor/
|-----------------/bootstrap/
|-----------------/font-awesome/
|-----------------/jquery/
|-----------------/normalize-css/
|----------/404.html
|----------/about.html
|----------/contacts.html
|----------/index.html
|----------/services.html
|------/.bowerrc
|------/.gitignore
|------/bower.json
|------/gulpfile.js
|------/package.json
|------/dist/
|-----------/assets/
|------------------/css/
|----------------------/common.min.css
|----------------------/vendor.min.css
|------------------/fonts/
|------------------/images/
|------------------/js/
|---------------------/common.min.js
|---------------------/vendor.min.js
|-----------/404.html
|-----------/about.html
|-----------/contacts.html
|-----------/index.html
|-----------/services.html
|------/node_modules/

Default installed jQuery, Normalize.css, Bootstrap, Font Awesome.

This list changed with Bower and further to make the appropriate changes in gulpfile.js. And reload Gulp.

For development need to run Gulp:

gulp

All development happens in folder app.

For creating of production folder need to run command:

gulp public