Skip to content

Latest commit

 

History

History
118 lines (80 loc) · 1.75 KB

README.md

File metadata and controls

118 lines (80 loc) · 1.75 KB
Raw

Grunt Setup 🌸

A quick gruntfile.js for new projects

Dependencies

  • grunt
  • grunt-cli

Dev Dependencies

  • diff
  • node-sass
  • grunt-sass
  • grunt-contrib-concat
  • gruntjs/grunt-contrib-uglify#harmony
  • grunt-autoprefixer
  • grunt-contrib-watch
  • grunt-contrib-connect

To Do

  • Find new Uglify package for JS
  • Check all packages for updates

Use this Repo

git clone git@github.com:angelajholden/grunt-setup.git

npm update

Start from Scratch

npm init -y

npm i grunt grunt-cli

npm i -D diff node-sass grunt-sass grunt-contrib-concat gruntjs/grunt-contrib-uglify#harmony grunt-autoprefixer grunt-contrib-watch grunt-contrib-connect

On your marks, get set... GO!

In the terminal type grunt to start watching your files. The output should look something like this.

Grunt running in the terminal

.gitignore

Remember to add a .gitignore file before you git init your project.

.DS_Store
node_modules
tmp
.tmp
.npm-debug.log
*.sass-cache
*.css.map
*.min.js.map

Live Reload

Listens on port: 8000 by default. Double check the grunt terminal output to be sure.

http://127.0.0.1:8000

Source Folders

Create directories and files to edit your SCSS and JavaScript using this structure.

components/
|__ scripts/
    |__ script.js
    |__ your_scripts.js

|__ scss/
    |__ _your_partials.scss
    |__ _main.scss
    |__ styles.scss

Compiled Folders

Grunt will compile your SCSS and JavaScript like this.

dist/
|__ js/
    |__ scripts.js
    |__ scripts.min.js
    |__ scripts.min.js.map

|__ css/
    |__ styles.css
    |__ styles.map.css

Cheers!
Angela 💕