Skip to content
This repository has been archived by the owner on May 16, 2021. It is now read-only.

Commit

Permalink
Added gulp task runner to repalce grunt
Browse files Browse the repository at this point in the history
  • Loading branch information
benbrehaut committed Aug 13, 2017
1 parent 1be924b commit 87a2223
Show file tree
Hide file tree
Showing 13 changed files with 1,761 additions and 245 deletions.
195 changes: 0 additions & 195 deletions Gruntfile.js

This file was deleted.

30 changes: 15 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ The purpose of these theme is to be a starting point for theme creation, reducin

## Requirements
* [Node.js](https://nodejs.org/en/)
* [Grunt](http://www.gruntjs.com)
* [Gulp](https://gulpjs.com/)
* [Sass](http://www.sass-lang.com)

## How to build
Expand All @@ -22,11 +22,11 @@ $ cd vanlig
npm install
````

3. Open the ``Gruntfile.js`` file and change the proxy name in BrowserSync (line :31) to your name of your MAMP site.
3. Open the ``gulpfile.js`` file and change the proxy name in BrowserSync for your site URL.

4. Then run the grunt command to start development!
4. Then run the npm command to start development!
````
grunt
npm run dev
````

This will open up a new BrowserSync session and start watching our files for changes and compiling and uglifying the JavaScript files.
Expand All @@ -35,32 +35,32 @@ This will open up a new BrowserSync session and start watching our files for cha

### BrowserSync
###### Default task
BrowserSync is a useful tool for having your changes made when coding reload your tab automatically. On start of Grunt, BrowserSync will start a new session and provide you a local address (``localhost:3000``) and a external address (``192.168.30.##:3000``) which you can use to view your site on another device which isn't your computer.
BrowserSync is a useful tool for having your changes made when coding reload your tab automatically. On start of Gulp, BrowserSync will start a new session and provide you a local address (``localhost:3000``) and a external address (``192.168.##.##:3000``) which you can use to view your site on another device which isn't your computer.

BrowserSync watches for changes made to all ``.php``, ``.css`` and ``.js`` files, so any changes will be applied automatically.

Make sure you have changed the proxy name in the BrowserSync settings in the ``Gruntfile.js`` for BrowserSync to work.
Make sure you have changed the proxy name in the BrowserSync settings in the ``gulpfile.js`` for BrowserSync to work.

### Styles
###### Default task
All Sass files are located within ``/assets/scss``, with the ``style.scss`` outputting into ``/assets/css/style.css`` This can be changed with ``Grunt.js`` file if you wish, but is probably best to keep it to this default location.
All Sass files are located within ``/assets/scss``, with the ``style.scss`` outputting into ``/assets/css/dist/main.css`` This can be changed with ``gulpfile.js`` file if you wish, but is probably best to keep it to this default location.

* ``style.css`` is blank on purpose, and is required by WordPress to register this as a theme.
* ``/assets/scss/style.scss`` is our main stylesheet, which will compile everything inside it into ``/assets/css/style.css``
* ``style.css`` within the root of this theme is blank on purpose, and is required by WordPress to register this as a theme.
* ``/assets/scss/style.scss`` is our main stylesheet, which will compile everything inside it into ``/assets/css/dist/main.css`` and also the minified and compressed version, ``/assets/css/dist/main.min.css``

### Scripts
###### Default task
All JavaScript files are located with ``/assets/js``, the ``main.js`` file is the main Javascript file for the theme, with external third party libraries within the ``libs`` folder. All files within this will be concatenated into the ``scripts.js`` file, includeding the ``main.js`` file, which is then concatenated and compressed into ``scripts.min.js``
All JavaScript files are located with ``/assets/js``, the ``scripts.js`` file is the main Javascript file for the theme, with external third party libraries within the ``vendor`` folder. All files within this will be concatenated into the ``dist/main.js`` file and ``dist/main.min.js``

* ``/assets/js/main.js`` is the main JavaScript file. This is where you should write all of your JavaScript.
* ``/assets/js/scripts.js`` is the uncompressed and concatenated JavaScript file from all of the files within the ``/assets/js/libs/*.js`` folder and ``/assets/js/main.js`` file.
* ``/assets/js/scripts.min.js`` is our compressed version of the ``/assets/js/scripts.js`` file.
* ``/assets/js/scripts.js`` is the main JavaScript file. This is where you should write all of your JavaScript.
* ``/assets/js/dist/main.js`` is the uncompressed and concatenated JavaScript file from all of the files within the ``/assets/js/vendor/*.js`` folder and ``/assets/js/scripts.js`` file.
* ``/assets/js/dist/main.min.js`` is our compressed version of the ``/assets/js/dist/main.js`` file.

### SVG Icons
###### Non default task
Instead of putting the full SVG code, we can reference them using ``<use xlink:href="#icon-name"></use>``

Place all of the icons within the ``/assets/icons/`` folder, and then run the command ``grunt svgstore`` which will then generate the ``svg-defs.svg`` file. This is linked at the bottom of the ``footer.php`` file.
Place all of the icons within the ``/assets/icons/`` folder, and then run the command ``gulp svgstore`` which will then generate the ``svg-defs.svg`` file. This is linked at the bottom of the ``footer.php`` file.

You can then use the icons with the ``<use></use>`` tag!

Expand All @@ -74,4 +74,4 @@ You can then use the icons with the ``<use></use>`` tag!
###### Non default task
If you require images within the theme, you can minify the images without the lose of quality.

Run the command ``grunt imagemin`` which will minify all .jpg's, .png's and .gif's. The files will be replaced automatically with the new minified version.
Run the command ``gulp imgs`` which will minify all .jpg's, .png's and .gif's. The files will be replaced automatically with the new minified version.
Loading

0 comments on commit 87a2223

Please sign in to comment.