Updating Foundations grunt to do more

When working with a site that has been setup as a new foundation project with --libsass the Gruntfile.js will build the app.css file and watch the *.scss files in the scss directory and run sass on them.

We can update the Gruntfile.js so it allows watching of any file *.scss or *.sass in the folder and also create a app.js file from the js files in bower_components (where the foundation files were being pulled from for the foundation site)

First we need to add to our package.json file

npm install --save-dev grunt-contrib-uglify
npm install --save-dev grunt-contrib-concat
npm install --save-dev grunt-contrib-copy

Final package.json file

{
  "name": "foundation-libsass-template",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "~0.5.0",
    "grunt-contrib-copy": "~0.7.0",
    "grunt-contrib-uglify": "~0.7.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-sass": "~0.17.0",
    "node-sass": "~1.2.3"
  }
}

New Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }
      }
    },

    copy: {
      scripts: {
        expand: true,
        cwd: 'bower_components/',
        src: '**/*.js',
        dest: 'js'
      },

      maps: {
        expand: true,
        cwd: 'bower_components/',
        src: '**/*.map',
        dest: 'js'
      }
    },

    uglify: {
      dist: {
        files: {
          'js/modernizr/modernizr.min.js': ['js/modernizr/modernizr.js']
        }
      }
    },

    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: [
          'js/dollarsign.js',
          'js/foundation/js/foundation.min.js',
          'js/custom/*.js',
        ],

        dest: 'js/app.js'
      }

    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

      sass: {
        files: 'scss/**/*.{scss,sass}',
        tasks: ['sass']
      },

      scripts: {
          files: ['js/custom/*.js'],
          tasks: ['concat', 'uglify']
      }

    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.registerTask('build', ['sass', 'copy', 'uglify', 'concat']);
  grunt.registerTask('runwatch', ['sass','uglify', 'concat']);
  grunt.registerTask('default', ['runwatch','watch']);
}

javascript files

you should have a js folder put the dollarsign.js in it and create a sub folder of custom with the pageSetup.js in it