Basic GH Taskrunner setup

README.md

Greenheart Taskrunner Setup

To install from scratch:

• Go to the root folder of the project in terminal, cmd, or bash
• Pull from the github of the plugin, you should see an update to .gitignore to ignore /nodemodules
• You should see a Gruntfile.js
• You should see package.json

Install global dependencies:

First check to see if you have the dependencies already installed

$ node -v
$ npm -v
$ ruby -v
$ sass -v

If you get a "Command not found" error instead of a version number, you will need to install the global dependency that you are missing. These should all be installed in a global fashion, as they will be needed on every greenheart repo that compiles CSS.

1. Install Node: https://www.taniarascia.com/how-to-install-and-use-node-js-and-npm-mac-and-windows/
2. Once you install node, you should have NPM, check with the npm -v command again. If there is a problem go here: https://www.npmjs.com/get-npm
3. Install Ruby: https://www.ruby-lang.org/en/documentation/installation/
4. Once you have Ruby installed go back to terminal and run this command:

$ gem install sass 

Run Grunt

Now that you have your dependencies, you should be able to run everything. Just run npm install and it will install the package.json

Everything should build, and if it looks good you can run the grunt command. If it runs without issues you are ready to compile your sass modules:

$ npm install
$ grunt

Once you are ready to edit your SCSS/SASS modules run

$ grunt watch

and you will compile your modules in real-time. Thanks!

License

MIT

Gruntfile.js

'use strict';
module.exports = function(grunt) {

  grunt.initConfig({
    sass: {
      appStyles: {options: {style: 'expanded', sourcemap: 'none'}, files: {'library/theme/css/q.1.theme.css': 'library/theme/sass/q.1.theme.scss'}},
      /*appStylesMinified: {options: {style: 'compressed', sourcemap: 'none'}, files: {'library/theme/css/q.1.theme.min.css': 'library/theme/sass/q.1.theme.scss'}} */
    },
    watch: {
      options: {
        livereload: true
      },
      sass: {
        files: [
          'library/theme/sass/*.scss'
        ],
        tasks: ['sass', 'postcss:prefix', 'postcss:minify']
      },
    },
    clean: {
      dist: [
        'library/theme/css/q.1.theme.min.css'
      ]
    },
    postcss: {
      prefix: {
        options: {
          processors: [
            require('autoprefixer')()
          ]
        },
        src: 'library/theme/css/q.1.theme.css',
        dest: 'library/theme/css/q.1.theme.css'
      },
      minify: {
        options: {
          processors: [
            require('cssnano')() //minifies
          ]
        }, 
        src: 'library/theme/css/q.1.theme.css',
        dest: 'library/theme/css/q.1.theme.min.css'
      }
    }

  });

  /* Load tasks */
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-postcss');

  // Register tasks
  grunt.registerTask('default', [
    'clean',
    'sass',
    'postcss',
    'postcss:prefix', 
    'postcss:minify'
  ]);
  grunt.registerTask('dev', [
    'watch'
  ]);

};

package.json

{
  "name": "greenheart-sass-compile",
  "version": "1.1.0",
  "description": "Greenheart Basic Grunt Taskrunner Build",
  "author": "Ben Toth",
  "homepage": "https://greenheart.org",
  "repository": "zimaben/greenheart-grunt-sass",
  "license": "MIT",
  "engines": {
    "node": ">= 10.16.1"
  },
  "keywords": [
    "grunt, sass"
  ],
  "dependencies": {
    "chalk": "^2.1.0",
    "diff": "^3.0.0",
    "postcss": "^6.0.11"
  },
  "devDependencies": {
    "sass": "*",
    "cssnano": "^4.1.10",
    "grunt": "~1.0.3",
    "grunt-contrib-clean": "~2.0.0",
    "grunt-contrib-nodeunit": "^2.0.0",
    "grunt-contrib-sass": "~1.0.0",
    "grunt-contrib-watch": "~1.1.0",
    "grunt-postcss": "^0.9.0",
    "load-grunt-tasks": "^3.1.0",
    "postcss-scss": "^1.0.2",
    "time-grunt": "^1.1.0",
    "autoprefixer": "^9.7.1"
  },
  "browserslist": [
    "last 5 versions",
    "> 1%",
    "IE 10"
  ]
}

Sass: npm node-sass -v
Ruby: ruby -v
Grunt: grunt -V