Concat files based on MVC Area - javascript

I'm building an MVC application, which is making use of Areas. So I've got a folder structure as follows:
Areas/
AreaOne/
Views/
About/
ScriptOne.js
ScriptTwo.js
Index.cshtml
Home/
ScriptThree.js
ScriptFour.js
Index.cshtml
AreaTwo
Views/...
I'd like to bundle the JavaScript files within the individual page's folder within the View folder.
E.g. ScriptOne.js, ScriptTwo.js should be bundled into About.js and output into a seperate folder like:
js/
Areas/
AreaOne/
About.js
Home.js
I'm able to grab the files, however it will grab all .js files under Areas.
gulp.src('./Areas/**/*.js')
Areas\AreaOne\Views\About\ScriptOne.js
Areas\AreaOne\Views\About\ScriptTwo.js
Areas\AreaOne\Views\Home\ScriptThree.js
Areas\AreaOne\Views\Home\ScriptFour.js
If I concat this I'll end up with a single .js file. However I'd like About.js and Home.js
If I can achieve the above in theory I can use the following (but i'm unsure how to get the appropriate area name:
pipe(gulp.dest('./js/Areas/...AREA NAME GOES HERE.../'))
I'm trying to avoid manual concatenation of files.. like so..
gulp.src(['./Areas/AreaOne/Views/About/ScriptOne.js', './Areas/AreaOne/Views/About/ScriptTwo.js'])

Not sure it's the most succinct way but it works and it's fairly simple.
I use Glob to get the file names within the Areas.
I then add the view paths to a JavaScript object (this works like a set, it prevents duplicates), I also add the name of the view folder as this will be the output file name.
I use gulp.src with the distinct view folder names to collect all of the Javascript files within the individual view folder and then concat them, and finally if it's a release build the files get ugilfied.
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
glob = require('glob'),
path = require('path');
gulp.task('process-areas-js', function () {
glob('./Areas/**/*.js*', null, function (er, files) {
var distinctAreaPaths = {};
for (var i = 0; i < files.length; i++) {
var filePath = path.dirname(files[i]).replace(/\./g, "");
var viewFolderName = path.basename(filePath);
distinctAreaPaths[filePath] = viewFolderName;
}
for (distinctPath in distinctAreaPaths) {
var concatName = distinctAreaPaths[distinctPath] + ".js";
var destination = './js' + path.dirname(distinctPath);
var sourceGlob = "." + distinctPath + "/*.js";
var pipeline = gulp.src(sourceGlob)
.pipe(concat(concatName))
uglifyOnRelease(pipeline)
.pipe(gulp.dest(destination));
}
});
});
gulp.task('default', ['process-areas-js']);
function uglifyOnRelease(pipeline) {
return process.env.NODE_ENV === 'Release' || process.env.NODE_ENV == null ? pipeline.pipe(uglify()) : pipeline;
}

Related

How can I get the latest modified version of files with similar name, delete the old version from a google drive folder, Google apps scripts

This is an extension to a problem statement, I initially had to merge folders with same name,
move all data from one folder to another, delete the empty duplicate folder.
Mentioned below is the code which works when you move all data to one folder in drive.
function Main(){
var rootFolder=DriveApp.getRootFolder();
var rootFolderIterator= rootFolder.getFolders();
while(rootFolderIterator.hasNext()){
var ParentFolder=rootFolderIterator.next();
Logger.log(ParentFolder);
MergeFiles(ParentFolder);
}
}
function MergeFiles(folder) {
var parentFolder = folder;
var childFolderIterator = parentFolder.getFolders(); //all folders within parent folder
//iteration over all folders in parent directory
while (childFolderIterator.hasNext()) {
var childFolder = childFolderIterator.next();
MergeFiles(childFolder);
var childFolderName = childFolder.getName();
Logger.log(childFolderName);
var childSameNameIterator = parentFolder.getFoldersByName(childFolderName);
//just check if folder with givn name exist (there should be at least one)
if(childSameNameIterator.hasNext()) {
var destFolder = childSameNameIterator.next();
//iteration over 2nd and all other folders with given name
while (childSameNameIterator.hasNext()) {
var toMergeFolder = childSameNameIterator.next();
var filesToMove = toMergeFolder.getFiles();
var foldersToMove = toMergeFolder.getFolders()
//iteration over all files
while (filesToMove.hasNext()) {
var file = filesToMove.next();
moveFile(file, destFolder);
}
//iteration over all subfolders
while (foldersToMove.hasNext()) {
var folder = foldersToMove.next();
moveFolder(folder, destFolder);
}
//trashes empty folder
//toMergeFolder.setTrashed(true);
}
}
}
}//custom function which removes all parents from speciefied file and adds file to new folder
function moveFile(file, destFolder) {
var currentParents = file.getParents();
while (currentParents.hasNext()) { // be careful, this loop will remove all parents from the file... if you want to have this file in multiple folders you should add if statement to remove it only from specified folder
var currentParent = currentParents.next();
currentParent.removeFile(file);
}
destFolder.addFile(file);
Logger.log("File moved to " + destFolder.getName());
}
//custom function which removes all parents from speciefied folder and adds that folder to new one
function moveFolder(folder, destFolder) {
var currentParents = folder.getParents();
while (currentParents.hasNext()) { // be careful, this loop will remove all parents from the folder... if you want to have this folder in multiple folders you should add if statement to remove it only from specified folder
var currentParent = currentParents.next();
currentParent.removeFolder(folder);
}
destFolder.addFolder(folder);
Logger.log("Folder moved to " + destFolder.getName());
}
I have to now look for files with same name in destination folders, keep only the latest file, deleting the old version.
I need help with placement and script of
Searching files with similar names, get files in the folders .
Compare the last modified date of both files.
Keep the latest modified file out of two and move to trash the other file.

How to rename a zip file after an HTML file in a Gulp task

I am attempting to zip up all files in my dist folder using gulp-zip and would like to dynamically name the zip file after the only html file in that directory. Here's my attempt using gulp-filenames, but have had no luck.
const rename = require('gulp-rename');
const zip = require('gulp-zip');
var filenames = require('gulp-filenames');
gulp.task('zipp', function(){
gulp.src('dist/*')
.pipe(zip('_final.zip'))
.pipe(rename({prefix:getHtmlName()}))
.pipe(gulp.dest('./dist'))
})
function getHtmlName(){
gulp.src("./src/*.html")
.pipe(filenames("html"))
.pipe(gulp.dest("./dist"));
return filenames.get("html");
}
Here are two ways:
const gulp = require('gulp');
const rename = require('gulp-rename');
const zip = require('gulp-zip');
const filenames = require('gulp-filenames');
// run the getHTMLname task first, filenames will then have the data stored in an array
gulp.task('zipp', ['getHTMLname'], function () {
return gulp.src('dist/*')
.pipe(zip('_final.zip'))
// rename gets the file passing through it, in this case '_final.zip'
.pipe(rename(function (path) {
// retrieve the array of string filenames, use the first and only one in the array
// and get the basename via split
path.basename = filenames.get("html")[0].split('.')[0] + path.basename;
}))
.pipe(gulp.dest('./dist'))
})
gulp.task('getHTMLname', function () {
return gulp.src("./dist/*.html")
.pipe(filenames("html"))
});
// **************************************************************
const gulp = require('gulp');
const rename = require('gulp-rename');
const zip = require('gulp-zip');
const glob = require("glob");
const path = require('path');
gulp.task('zipp', function () {
return gulp.src('dist/*')
.pipe(zip('_final.zip'))
.pipe(rename(function (file) {
// glob.sync returns an array, get the first member of that array
// path.basename('string', '.html') returns the name of the file without the extension
var temp = path.basename(glob.sync("./dist/*.html")[0], '.html');
file.basename = temp + file.basename;
}))
.pipe(gulp.dest('./dist'))
});
If you really want to use gulp-filenames, use the code above the ********'s. The 'getHTMLname' task must run first - that is when gulp-filenames builds its array of file names from whatever source directory you feed it. That array can later be used anywhere in a subsequent task.
However, I recommend the second method using glob and path modules, which you should learn anyway. The second method does not require a separate task, it just gets, globs, the html filename you want right in the same task so it is simpler. Also when I installed gulp-filenames it is using a ton of deprecated modules so it badly needs to be updated. It works now but may not as you update node, etc.

Merge js files into one with phpStorm

Using phpStorm, I would like to merge multiple JavaScript files into one.
I installed the closure compiler and configured the file watcher to minify each JavaScript file.
Now, I would like to combine all of my JavaScript files into one.
Here's the architecture of my project (a test project to merge js files) :
index.php
js(folder) >
first.js (+first.min.js),
second.js (+second.min.js),
third.js (+third.min.js)
cache (folder)
main.js
I would like to merge (first.min.js, second.min.js, third.min.js) into folder cache > main.js.
Ideally, merging all of the files would happen automatically; I don't want to specify each js file manually.
Can someone explain the arguments I must use to configure my filewatcher?
I used npm plugins concat, minifier and walk.
Here is the script I made :
var walk = require('walk'),
concat = require('concat'),
minifier = require('minifier'),
files = [];
var JS_SOURCES_DIR = 'app/components',
JS_LAST_FILE = 'app/app.module.js',
JS_DIR = 'app/',
JS_FULL_FILE = JS_DIR + 'app.js',
JS_MINIFIED_FILE = 'app.min.js',
JS_MINIFIED_FILE_PATH = JS_DIR + JS_MINIFIED_FILE;
var walker = walk.walk(JS_SOURCES_DIR, {followLinks: false});
walker.on('file', (root, stat, next) => {
var fullpath = root.replace(/\\/g, '/');
var regex = new RegExp(/.+\.js$/);
if (stat.name.match(regex)) {
files.push(fullpath + '/' + stat.name);
}
next();
});
walker.on('end', function () {
files.push(JS_LAST_FILE);
files.forEach(function (item) {
console.log(item);
})
concat(files, JS_FULL_FILE).then((result) => {
minifier.minify(JS_FULL_FILE, {output: JS_MINIFIED_FILE_PATH});
console.log('\n[OK] ' + JS_MINIFIED_FILE + ' sucessfully updated');
}, function (error) {
console.log('[ERROR] JS concat failure: ' + error.message);
});
});
minifier.on('error', function (error) {
console.log('\n[ERROR] JS minify error: ' + error);
});
First with walker, files are added to var "files". I used JS_LAST_FILE for angularjs concerns, as I build the module and add all the dependencies in that file. Then files are concatenated to JS_FULL_FILE. Finally JS_FULL_FILE is minified to JS_MINIFIED_FILE.
I do not use a watcher to trigger the concat script when a file is updated.
Instead when I work locally, I don't concatenate files but I simply add them in the head part of the page using a homemade function that uses php scandir().

gulp - exclude a file when minifying CSS

Im new to Gulp.. I have been able to successfully install and concatenate and minify my .js and .css files, however, there is one .css file which i want to exclude - print.css
Ive followed the instructions here: https://www.npmjs.org/package/gulp-ignore install gulp-ignore in my local directory, and modified my gulpfile.js to:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var exclude = require('gulp-ignore').exclude;
var paths = {
scriptsNonAuth: ['Non-Auth/javascript/*.js'],
scriptsAuth: ['Auth/javascript/*.js'],
stylesNonAuth: ['Non-Auth/css/*.css'],
stylesAuth: ['Auth/css/*.css'],
};
// CSS Task - Non Authenticated
gulp.task('minify-css-non-auth', function() {
gulp.src(paths.stylesNonAuth)
.pipe(minifyCSS(opts))
.pipe(concat('all.min.css'))
.pipe(gulp.dest('Non-Auth/css'))
});
// CSS Task - Authenticated
gulp.task('minify-css-auth', function() {
gulp.src(paths.stylesAuth)
.pipe(minifyCSS(opts))
**.pipe(exclude('Auth/css/print.css'))**
.pipe(concat('all.min.css'))
.pipe(gulp.dest('Auth/css'))
});
Within my CSS Task - Secure, i have included .pipe(exclude('Secure/css/print.css'))
When i run gulp minify-css-secure, the task completes but upon inspecting the new all.min.css, i cant see the contents of print.css within there too.
It's unclear what you are trying to achieve. If I get it right, you want to:
minify all css files (including print.css)
concat all files except print.css into all.min.css
put minified all.min.css and print.css into destination folder
To achieve that, you can use StreamQueue. (source)
var streamqueue = require('streamqueue');
var paths = {
scriptsNonAuth: ['Non-Auth/javascript/*.js'],
scriptsAuth: ['Auth/javascript/*.js'],
stylesNonAuth: ['Non-Auth/css/*.css'],
stylesAuth: ['Auth/css/*.css', '!Auth/css/print.css'],
};
gulp.task('minify-css-auth', function() {
return streamqueue({ objectMode: true },
gulp.src(paths.stylesAuth)
.pipe(minifyCSS(opts))
.pipe(concat('all.min.css')),
gulp.src('Auth/css/print.css'))
.pipe(minifyCSS(opts))
)
.pipe(gulp.dest('Auth/css'))
});
If you want to just exclude some files, you don't need gulp-ignore. Gulp supports ignore globs.
Just prefix the path to exclude with bang.
Like this:
stylesAuth: ['Auth/css/*.css', '!Auth/css/print.css']

Iterating over directories with Gulp?

I'm new to gulp, but I'm wondering if its possible to iterate through directories in a gulp task.
Here's what I mean, I know a lot of the tutorials / demos show processing a bunch of JavaScript files using something like "**/*.js" and then they compile it into a single JavaScript file. But I want to iterate over a set of directories, and compile each directory into it's own JS file.
For instance, I have a file structure like:
/js/feature1/something.js
/js/feature1/else.js
/js/feature1/foo/bar.js
/js/feature1/foo/bar2.js
/js/feature2/another-thing.js
/js/feature2/yet-again.js
...And I want two files: /js/feature1/feature1.min.js and /js/feature2/feature2.min.js where the first contains the first 4 files and the second contains the last 2 files.
Is this possible, or am I going to have to manually add those directories to a manifest? It would be really nice to pragmatically iterate over all the directories within /js/.
Thanks for any help you can give me.
-Nate
Edit: It should be noted that I don't only have 2 directories, but I have many (maybe 10-20) so I don't really want to write a task for each directory. I want to handle each directory the same way: get all of the JS inside of it (and any sub-directories) and compile it down to a feature-based minified JS file.
There's an official recipe for this: Generating a file per folder
var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var scriptsPath = 'src/scripts';
function getFolders(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
gulp.task('scripts', function() {
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/**/*.js'))
// concat into foldername.js
.pipe(concat(folder + '.js'))
// write to output
.pipe(gulp.dest(scriptsPath))
// minify
.pipe(uglify())
// rename to folder.min.js
.pipe(rename(folder + '.min.js'))
// write to output again
.pipe(gulp.dest(scriptsPath));
});
// process all remaining files in scriptsPath root into main.js and main.min.js files
var root = gulp.src(path.join(scriptsPath, '/*.js'))
.pipe(concat('main.js'))
.pipe(gulp.dest(scriptsPath))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest(scriptsPath));
return merge(tasks, root);
});
You could use glob to get a list of directories and iterate over them, using gulp.src to create a separate pipeline for each feature. You can then return a promise which is resolved when all of your streams have ended.
var fs = require('fs');
var Q = require('q');
var gulp = require('gulp');
var glob = require('glob');
gulp.task('minify-features', function() {
var promises = [];
glob.sync('/js/features/*').forEach(function(filePath) {
if (fs.statSync(filePath).isDirectory()) {
var defer = Q.defer();
var pipeline = gulp.src(filePath + '/**/*.js')
.pipe(uglify())
.pipe(concat(path.basename(filePath) + '.min.js'))
.pipe(gulp.dest(filePath));
pipeline.on('end', function() {
defer.resolve();
});
promises.push(defer.promise);
}
});
return Q.all(promises);
});
I am trying myself to get how streams work in node.
I made a simple example for you, on how to make a stream to filter folders and start a new given stream for them.
'use strict';
var gulp = require('gulp'),
es = require('event-stream'),
log = require('consologger');
// make a simple 'stream' that prints the path of whatever file it gets into
var printFileNames = function(){
return es.map(function(data, cb){
log.data(data.path);
cb(null, data);
});
};
// make a stream that identifies if the given 'file' is a directory, and if so
// it pipelines it with the stream given
var forEachFolder = function(stream){
return es.map(function(data, cb){
if(data.isDirectory()){
var pathToPass = data.path+'/*.*'; // change it to *.js if you want only js files for example
log.info('Piping files found in '+pathToPass);
if(stream !== undefined){
gulp.src([pathToPass])
.pipe(stream());
}
}
cb(null, data);
});
};
// let's make a dummy task to test our streams
gulp.task('dummy', function(){
// load some folder with some subfolders inside
gulp.src('js/*')
.pipe(forEachFolder(printFileNames));
// we should see all the file paths printed in the terminal
});
So in your case, you can make a stream with whatever you want to make with the files in a folder ( like minify them and concatenate them ) and then pass an instance of this stream to the forEachFolder stream I made. Like I do with the printFileNames custom stream.
Give it a try and let me know if it works for you.
First, install gulp-concat & gulp-uglify.
$ npm install gulp-concat
$ npm install gulp-uglify
Next, do something like:
//task for building feature1
gulp.task('minify-feature1', function() {
return gulp.src('/js/feature1/*')
.pipe(uglify()) //minify feature1 stuff
.pipe(concat('feature1.min.js')) //concat into single file
.pipe(gulp.dest('/js/feature1')); //output to dir
});
//task for building feature2
gulp.task('minify-feature2', function() { //do the same for feature2
return gulp.src('/js/feature2/*')
.pipe(uglify())
.pipe(concat('feature2.min.js'))
.pipe(gulp.dest('/js/feature2'));
});
//generic task for minifying features
gulp.task('minify-features', ['minify-feature1', 'minify-feature2']);
Now, all you have to do to minify everything from the CLI is:
$ gulp minify-features
I had trouble with the gulp recipe, perhaps because I'm using gulp 4 and/or because I did not want to merge all my folders' output anyway.
I adapted the recipe to generate (but not run) an anonymous function per folder and return the array of functions to enable them to be processed by gulp.parallel - in a way where the number of functions I would generate would be variable. The keys to this approach are:
Each generated function needs to be a function or composition (not a stream). In my case, each generated function was a series composition because I do lots of things when building each module folder.
The array of functions needs to passed into my build task using javascript apply() since every member of the array needs to be turned into an argument to gulp.parallel in my case.
Excerpts from my function that generates the array of functions:
function getModuleFunctions() {
//Get list of folders as per recipe above - in my case an array named modules
//For each module return a function or composition (gulp.series in this case).
return modules.map(function (m) {
var moduleDest = env.folder + 'modules/' + m;
return gulp.series(
//Illustrative functions... all must return a stream or call callback but you can have as many functions or compositions (gulp.series or gulp.parallel) as desired
function () {
return gulp.src('modules/' + m + '/img/*', { buffer: false })
.pipe(gulp.dest(moduleDest + '/img'));
},
function (done) {
console.log('In my function');
done();
}
);
});
}
//Illustrative build task, running two named tasks then processing all modules generated above in parallel as dynamic arguments to gulp.parallel, the gulp 4 way
gulp.task('build', gulp.series('clean', 'test', gulp.parallel.apply(gulp.parallel, getModuleFunctions())));
`

Categories

Resources