gruntjsgulpgrunt-contrib-coffee

Move from Grunt to Gulp


I’m using grunt to build coffee script and less files in my project. Now I want to move to gulp… but I’m facing some problems.

In my grunt file if a global object containing the paths to all my source and destination directories. Each Tasks is using this path to find the files to process.

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),   
    // Global configuration
    globalConfig: {
        //Source Paths
        src: {
            styleDirectory: "styles/",
            customStyleDirectory: '<%= globalConfig.src.styleDirectory %>_Custom/',
            scriptDirectory: "scripts/",
            customScriptDirectory: '<%= globalConfig.src.scriptDirectory %>_Custom/',
        },
        //Destination Paths
        dest: {
            outputRoot: "../",
            styleOutput: "<%= globalConfig.dest.outputRoot %>css/",
            scriptOutput: "<%= globalConfig.dest.outputRoot %>js/",
        }
    },
    // Compile coffee script to java script -----------------------------------------
    coffee: {
        options: { .. },
        customOut: {
            files: {
                '<%= globalConfig.dest.scriptOutput %>Main.js': [
                    '<%= globalConfig.src.customScriptDirectory %>_Root.coffee',
                    '<%= globalConfig.src.customScriptDirectory %>Logic/_Helpers.coffee',
                    '<%= globalConfig.src.customScriptDirectory %>**/*.coffee'
                ]
            }
        }
    }
});

How can a do something like this with gulp? <%= %> seems not to work.


Solution

  • In much the same way, you can use a multidimensional object from within your gulpfile.js config file:

    var directories = {
        styles: 'styles/',
        scripts: 'scripts/',
        dest: 'dest/'
    };
    
    var paths = {
        src: {
            customStyles: directories.styles+'_Custom/',
            customScripts: directories.scripts+'_Custom/'
        },
        dest: {
            styles: directories.dest + directories.styles,
            scripts: directories.dest + directories.scripts
        }
    };
    

    You can then reference the object from within your Gulp tasks as follows:

    gulp.task('styles', function() {
      return gulp.src(paths.src.styles + 'main.css')
        ...
    });
    
    // Rerun the task when a file changes
    gulp.task('watch', function() {
      gulp.watch(paths.src.styles, ['styles']);
      ...
    });