Move from Grunt to Gulp

Question

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.

Answer 1

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']);
  ...
});