Using Grunt to watch all files in my src directory and output to build

Question

I'm completely new to Grunt and I want to use it in my next project.

What I want to do is, for example, to have the file at src/server.coffee to be compiled to build/server.js and the file at src/public/assets/css/global.less to be compiled to build/public/assets/css/global.css.

That means I want to keep the same file path after src, as well as the same name of every file, only changing its extension. I can do this manually for every file in my project but I'd really like Grunt to do this with every file in the src folder.

How can I get this done?

score 0 · Answer 1 · answered Apr 22 '17 at 04:38

It seems I found the answer in the docs -- I just didn't know how to look for it.

What I want to do is called globbing: setting global routines for the Gruntfile. It looks like this (in CoffeeScript):

module.exports = (grunt) ->
    grunt.initConfig
        pkg: grunt.file.readJSON "package.json"

        coffee:
            files:
                expand: true
                cwd: "src/"
                flatten: false
                src: ["**/*.coffee"]
                dest: "build/"
                ext: ".js"

        less:
            files:
                expand: true
                cwd: "src/"
                flatten: false
                src: ["**/*.less"]
                dest: "build/"
                ext: ".css"


    grunt.loadNpmTasks 'grunt-contrib-coffee'
    grunt.loadNpmTasks 'grunt-contrib-less'

    grunt.registerTask 'default', ['coffee', 'less'];

    return

cwd sets the base directory, flatten: false makes Grunt respect subdirectory structure and [src: "**/*.coffee"] makes it look for every .coffee file in every subdirectory of the cwd. The output goes to the dest folder.

Using Grunt to watch all files in my src directory and output to build

1 Answers1