javascriptwordpressgruntjszurb-foundation

Grunt, Compass, Foundation (foundationpress wordpress theme)


I am looking to compile my javascript from js/custom/*.js into app.js using grunt. I want to have it so that any scripts that I modify/write are compiled and updated on my localhost.

I have my sass compiling properly though grunt I just want to have the same thing done quickly with my scripts in the (js/custom/*.js).

Not sure if this is done through compass or grunt just need a point in the right direction. Thanks.

    module.exports = function(grunt) {
    var jsApp = [
    'js/app.js',
    'js/_*.js'
  ];

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'expand'
        },
        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/foundation/js/foundation.min.js',
          'js/custom/*.js'
        ],

        dest: 'js/app.js'
      }

    },

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

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

    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('build', ['sass']);
  grunt.registerTask('default', ['copy', 'uglify', 'concat', 'watch']);
}

Solution

  • Add the concat task to your watch and that should fix it.

    watch: {
          grunt: { files: ['Gruntfile.js'] },
    
          sass: {
            files: 'scss/**/*.scss',
            tasks: ['sass']
          },
          concat: {
            files: ['js/custom/*.js'],
            tasks: ['concat']
    
          }
    }