This is a basic Gulp setup to compile CSS and JS from your development to a production environment. The following features have been added to this Gulp setup:
- Gulp 3.9.1
- Gulp Autoprefixer 3.1.0
- Gulp Clean CSS 2.0.9
- Gulp LiveReload 3.8.1
- Gulp Notify 2.2.0
- Gulp SASS 2.3.1
- Gulp Uglify 1.4.2
- Babelify 6.4.0
- Browserify 13.0.1
- React 15.1.0
- ReactDOM 15.1.0
- React Router 2.4.1
- Watchify 3.7.0
I hope that this comes as no surprise, but you need Node and Node Package Manager ("NPM") to use this Gulp starter kit. If you don't have NodeJS, download it here. NPM is included with NodeJS by default. But, just to be sure, run:
sudo npm install -g npm
Now, make sure to have Gulp installed globally on your machine.
sudo npm install -g gulp
In order for LiveReload to work, you need to install the Google Chrome LiveReload browser plugin (you can find it here).
You also need the development environment to be running over a server. I use http-server to serve up my development files. You can download it by doing:
sudo npm install -g http-server
With that, you should have all the external dependencies taken care of. Onto the good stuff...
Start by cloning this repository or downloading this repository as a zip file.
git clone https://nallenanderson@bitbucket.org/nallenanderson/gulp-setup.git
Next, install all of the node packages
npm install
After installing the NPM packages, you should have a file structure that looks like this:
├── gulp-setup
│ ├── node_modules
│ ├── public
│ │ ├── cs
│ │ │ ├── main.min.css
│ │ ├── js
│ │ │ ├── main.js
│ │ │ ├── main.min.js
│ │ ├── index.html
│ ├── src
│ │ ├── js
│ │ | ├── components
│ │ | | ├── app.js
│ │ | | ├── box.js
│ │ │ ├── main.js
│ │ ├── sass
│ │ │ ├── _colors.scss
│ │ │ ├── main.scss
│ ├── gulpfile.js
│ ├── package.json
│ ├── README.md
Now, open the gulp-setup folder in a terminal and run gulp
to start the process. Each time that you make a change to a Javascript file or a SASS file, Gulp will transpile, compile and re-package your assets. There's only one more step to go...
As mentioned earlier, you need to run your index.html file on a server for LiveReload to work. LiveReload is awesome because it refreshes your browser each time there is a change made to any of your assets. Assuming you downloaded the Chrome plugin above, open a new terminal window, and do the following:
cd public
http-server -p 8080
Do you have a favorite port? Don't worry, you can run this on any port that you would like by changing the number that comes after -p
.
That's it. Enjoy!