Gulp to create a file in a folder
I am trying to write a gulp task to build a javascript file and merge one file for each folder including the root folder.
I found this solution: https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md
If you have a set of folders and want to perform a set of tasks for each, for example ...
/scripts /scripts/jquery/*.js /scripts/angularjs/*.js
... and you want to end up with ...
/scripts /scripts/jquery.min.js /scripts/angularjs.min.js
However, it only creates a *.js
file for all sub-folders within the folder scripts
. I am trying to create a file *.js
inside the scripts of the root folder, i.e. my expected output would be:
/scripts.min.js /scripts/jquery.min.js /scripts/angularjs.min.js
I'm new to node, so I'm confused right now how to achieve this. I really appreciate your help on this. Many thanks.
source to share
You can create a separate task (baseScripts) to generate mini-scripts for the base directory. Then create another task (allScripts) that runs both baseScripts tasks and substrings.
var scriptsPath = 'src/scripts';
function getFolders(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
gulp.task('allScripts', ['baseScripts', 'subScripts']);
gulp.task('subScripts', function() {
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/*.js'))
.pipe(uglify())
.pipe(rename(folder + '.min.js'))
.pipe(gulp.dest(scriptsPath));
});
return merge(tasks);
});
gulp.task('baseScripts', function(){
return gulp.src(scriptsPath + '/*.js')
.pipe(uglify())
.pipe(concat('scripts.min.js'))
.pipe(gulp.dest('src'));
});
source to share
One day later, I came up with some modification as shown below.
var paths = {
js: {
folder: 'dev/assets/js'
}
};
gulp.task('js', function() {
var folders = getFolders(paths.js.folder);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(paths.js.folder, folder.path, '/*.js'))
.pipe(uglify())
.pipe(concat(folder.name + '.min.js'))
.pipe(gulp.dest(paths.js.dest));
});
merge(tasks);
browserSync.reload();
});
var getFolders = function(dir) {
var folders = [{path:'',name:'app'}];
var folder = fs.readdirSync(dir)
.filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
for (var i=0; i<folder.length;i++) {
folders.push({path: folder[i], name: folder[i]});
}
return folders;
};
I split the directories and names for the combined script into 2 object properties. So I don't need to have different tasks for the root folder and subfolders.
Please feel free to comment on my approach :)
source to share