从 Grunt 移至 Gulp
Move from Grunt to Gulp
我正在使用 grunt 在我的项目中构建咖啡脚本和更少的文件。
现在我想搬到gulp…但是我遇到了一些问题。
在我的 grunt 文件中,如果一个全局对象包含我所有源目录和目标目录的路径。
每个任务都使用此路径查找要处理的文件。
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'
]
}
}
}
});
如何用 gulp 做这样的事情?
<%= %> 似乎不起作用。
以几乎相同的方式,您可以在 gulpfile.js
配置文件中使用 multidimensional object
:
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
}
};
然后您可以从 Gulp 任务中引用该对象,如下所示:
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']);
...
});
我正在使用 grunt 在我的项目中构建咖啡脚本和更少的文件。 现在我想搬到gulp…但是我遇到了一些问题。
在我的 grunt 文件中,如果一个全局对象包含我所有源目录和目标目录的路径。 每个任务都使用此路径查找要处理的文件。
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'
]
}
}
}
});
如何用 gulp 做这样的事情? <%= %> 似乎不起作用。
以几乎相同的方式,您可以在 gulpfile.js
配置文件中使用 multidimensional object
:
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
}
};
然后您可以从 Gulp 任务中引用该对象,如下所示:
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']);
...
});