What is the meaning of "../" in javascript for windows path? - javascript

I have written some HTML and js code.
My folder Structure is :
A => B => C .
Folder C contains 'index.html' file and I want to access 'emotion.js'.
A => js => emotion.js is the actual place for emotion.js.
"<script src=\"../js/emotion.js\">"
I have given the link this way. It is not working actually.
I just want to know what "../" means? It is refers to one step before in the folder structure or the root folder?

../ refers to the parent folder.
If your folder structure is
A
B
C
index.html
js
emotion.js
Then inside index.html you will need to change the script tag to
<script src="../../js/emotion.js">

../ this will take you up one dir so use this 2 times eg ../../A/js/emotion.js
or you can use / without .. so this will take you to root no matter where you are .

Related

fs.existsSync() always returning false when path has ../

I have a line of code about which I have a problem. Basically, the purpose is to check if a file named tech-bg.jpg exists in the parent folder's sibling folder where the JS file is located.
This is the code:
fs.existsSync(path.join('..', config.ASSET_URL, 'images', config.BG_AUTH))
console.log(path.join('..', config.ASSET_URL, 'images', config.BG_AUTH))
Console Output:
../storage/images/tech-bg.jpg
Although the file exists, fs.existsSync() always returns false. I have tried removing the path.join and instead using string format, but it still returns false.
I also tried using path.resolve, which has the following console output:
C:\client_projects\tt\storage\images\tech-bg.jpg
Now it has the full path, but still no luck.
The directory structure:
root/
.../storage
../images
./tech-bg.jpg
../router
./index.js
I am not very experienced in NodeJS Filesystem API, so somebody please tell me what am I doing wrong here. Thank You!
root/
.../storage
**../images**
./tech-bg.jpg
../router
./index.js
The main problem is with "../images" as your images folder is not an immediate child of storage.
Here is code works fine here-
router=>index.js
const fs=require("fs");
var isExists=fs.existsSync("../storage/images/tech-bg.jpg");
console.log(isExists);
Below is directory system and node output-

How to get files dynamically from folder, subfolder and its subfolder in webpack javascript

I am trying to build a small application in VueJs with webpack, where I want to includes a config/routing files dynamically from folders. I have a folder structure something like this:
plugins
|----Ecommerce
|--------backend
|--------frontend
|------------config.js
|------------routes.js
|------------components
|----------------products.vue
|----Blog
|--------backend
|--------frontend
|------------config.js
|------------routes.js
|------------components
|----------------posts.vue
For this I am trying to include my files with:
const configRequire = require.context('./../plugins/', true, /\.\/[^/]+\/config\.js$/);
const routesRequire = require.context('./../plugins/', true, /\.\/[^/]+\/routes\.js$/);
But somehow it is not including the files. I guess something wrong with my regex
Edit:
Found out the problem, my files are not getting imported as it is inside folders/subfolder/subfolder, if I keep the folder structure as this:
plugins
|----Ecommerce
|--------backend
|--------config.js
|--------routes.js
|--------frontend
|------------components
|----------------products.vue
|----Blog
|--------backend
|--------config.js
|--------routes.js
|--------frontend
|------------components
|----------------posts.vue
I can see my files getting imported. But doesn't get when I keep my config/routes files inside frontend folder
Help me out in this. Thanks.
Check this to better understand your current regex: https://regex101.com/r/Y9sDZc/1 (remove the first line to see how it doesn't match the second.)
I'm not entirely sure what exactly you want to match and what not, so I can only guess what the correct solution for your case is, but here are some options:
config\.js matches all files called config.js. Directories are taken care of by your require.context parameters. This would also match plugins/foo/bar/config.js/somefile.txt though, if you control all files and are sure this isn't a problem using config\.js is your simplest solution.
A bit more selective would be:
.*\/config\.js$
Hope that helps.

Gulp copy list of folders with contents

I would like to copy a list of folders to a destination with gulp
So far i've come up with a working solution, but its far from performant.
The structure of my directory is like this:
App
src
web
some files...
and i would like to copy it to
build
src
web
the files
The code i am using to accomplish this is:
var paths = [path.app + '/src/', path.app + '/app/'].concat(path.assets);
paths.forEach(function(value, index){
// value.replace(path.app, path.build);
gulp.src(value + '/**/*')
.pipe(gulp.dest(value.replace(path.app, path.build)));
});
Where the assets are my files (or other directories)
However there is a loop and no clear return value. I am wondering if there is a more performant way of doing this
I'm not sure I understand what you're trying to do here (where is your gulp task definition for example?), but it seems like you just want to copy everything below App to the build folder while preserving directory structure.
If that's the case, you don't have to loop over the files and replace folder names yourself. Gulp does it for you:
gulp.task('default', function () {
return gulp.src('App/**')
.pipe( gulp.dest('build') );
});
Everything before the ** is automatically stripped from the path of files written to build, so you end up with build/src, build/web, etc ...

Using guard to minify javascript files into a different directory

I am trying to create my first guardfile and have run into difficulties trying to minify some of my javascript files.
I want guard to watch the 'app/assets/js' directory and any time a file is changed within this directory, for a minified version of the file to be created within 'public/js' with the same name and if possible within the same directory name.
For example were I to save the bootstrap.js file within app/assets/js/vendor I would like for the minified version to be placed within the public/js/vendor/bootstrap.min.js file.
Below are the relevant parts of my current guardfile:
require 'cssmin'
require 'jsmin'
module ::Guard
class Refresher < Guard
end
end
#
guard :refresher do
watch('public/css/styles.min.css') do |m|
css = File.read(m[0])
File.open(m[0], 'w') { |file| file.write(CSSMin.minify(css)) }
end
watch(%r[app/assets/js/.+]) do |m|
js = File.read(m[0])
File.open(m[0], 'w') { |file| file.write(JSMin.minify(js)) }
end
end
This is my first experience of Ruby and so beginner orientated answers would be appreciated. Thanks.
You write to the same file you're reading. According to your question, you need something like:
watch(%r[app/assets/js/(.+)]) do |m|
File.write("public/js/#{ m[1] }", JSMin.minify(File.read(m[0])))
end
Please note the capture group I've added to the regexp, so I can grab the filename with m[1].

grunt-init: How can I copy or create an empty directory?

I want copy an empty directory from my root folder into the new initialized project. I want do this, to provide an initial directory structure for new projects.
I have such empty directories in the folder 'my-template/root/' but that will not be copied by:
// Files to copy (and process).
var files = init.filesToCopy(props);
// Actually copy (and process) files.
init.copyAndProcess(files, props);
I tried this:
// to copy also the empty directories
init.copy('myDir1/');
init.copy('myDir2/');
But than grunt-init crashes with:
Error: Unable to read "grunt-init-example/root/myDir1/" file (Error code: EISDIR).
What have I to do, to get an empty directory to the destination folder?
I use grunt#0.4.0 and grunt-init#0.2.0.
Inspired by the answer of Nick Mitchinson, I use this workaround:
// module dependencies
var join = require("path").join;
// empty directories will not be copied, so we need to create them manual
grunt.file.mkdir( join(init.destpath(), 'myDir1') );
grunt.file.mkdir( join(init.destpath(), 'myDir2') );
Update:
Alternative solution is to add .gitkeep files to the empty directories. Than the directories are no more empty and will be listed with filesToCopy().
For more details about .gitkeep look here: https://stackoverflow.com/a/7229996/496587
Try taking a look this this article
The part relevant to creating a directory is:
var root = path.normalize(__dirname+"/relative/path/you/want");
grunt.file.mkdir(root);
however, reading the whole this would probably be good.
I create an empty __empty_file.txt file inside the empty folders which I want to get copied.
Inside my template.js file I do the following:
Store files which matches with our (__empty_file.txt) by iterating over files object returned by init.filesToCopy(props) to an array.
Create directories using grunt.file.mkdir for each item in the above array and remove this file from files reference which was returned by init.filesToCopy. This has to be called before the call to init.copyAndProcess.

Categories