- grunt
- grunt-cli
- diff
- node-sass
- grunt-sass
- grunt-contrib-concat
- gruntjs/grunt-contrib-uglify#harmony
- grunt-autoprefixer
- grunt-contrib-watch
- grunt-contrib-connect
- Find new Uglify package for JS
- Check all packages for updates
git clone git@github.com:angelajholden/grunt-setup.git
npm update
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
In the terminal type grunt
to start watching your files. The output should look something like this.
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
Listens on port: 8000
by default. Double check the grunt terminal output to be sure.
http://127.0.0.1:8000
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
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 💕