A simple environment to watch and compile your website project with Sass, PostCSS, Babel, Image Compress (JPG and PNG) and Autoprefixer.

You need npm and nodejs working to use this project.

You can download a zip file or clone the repository:

$ git clone https://github.com/pponto/gulp-webdev
$ cd gulp-webdev
$ npm install

And npm install to install all dependencies.

This page aplication only requires two commands to work. gulp command its the default procedured. dist for compressed final files.

All website project need to stay inside /src folder. All images at /src/img, all Javascript files at /src/js, and /src/sass for scss files.

project
│   README.md
│   gulpfile.js
│   package.json
│   LICENSE.md    
│
└───src
│   │   index.html
│   │   ...
│   │
│   └───img
│   │   │   img01.jpg
│   │   │   img02.png
│   │   │   ...
│   │   
│   └───js
│   │   │   jquery.js
│   │   │   main.js
│   │   │   ...
│   │   
│   └───sass
│       │   normalize.scss
│       │   style.scss
│       │   ...
│   
└───dist
    │   compiled files by gulp
    └───compiled folders by gulp

The folder structure can be modified at anytime by changing the names or anything you want in the gulpfile.js file.

gulp command will compile all files on the /src folder to another folder, called /dist. After the command, Gulp will monitor the files automatically with the watch function, always recompiling the files after any saved changes.

$ gulp

gulp dist* will compile all files, as well all images in the /img will be compressed, which are only copied with the gulp default command.

$ gulp dist

*This function does not have watch mode.

PostCSS Autoprefixer
PostCSS Easing Gradient
PostCSS Font Magician
PostCSS Responsive Type
Gulp Sass
Gulp Babel

This project is licensed under the MIT License - see the LICENSE.md file for details