I have a project with a certain folder structure and an other project which should be basically the same only some files are different.
I would like to write a gulp-task (or tasks) which are copying the first projects folder structure, but only create symlinks for the files, and don't overwrite files already in the other project.
I found out that I can create symlinks with gulp and vinyl-fs.
I tried to create a two step task. First, I tried to copy the folder structure, but I don't know how can I tell gulp that I only care about the folder structure.
Then second, I wanted to create a symlink task that is creating the symlinks in the correct directory.
Maybe, I could create it with only vinyl-fs's symlinks using a function parameter, but I can't find out how.
It would seem you can do this to copy only folders (exclude *.*):
gulp
.src(['base/path/**/*', '!base/path/**/*.*'])
.pipe(gulp.dest('target'));
Assuming all your files have some kind of extension (e.g. *.jpg).
For the symlinks, doesn't the following work?:
var vfs = require('vinyl-fs');
...
vfs
.src('base/path/**/*', { followSymlinks: false, nodir: true })
.pipe(vfs.symlink('target'));
...
Related
I am using webpack for a project where I need to have a javascript config file as part of the built files, but I cannot figure out how to do that.
So I need to have these files in the output:
index.html
app.js
config.js
I figure I need to either:
1) Copy the config.js file from the source folder to the build folder with CopyWebpackPlugin, or
2) Include the file in the compiled bundle and then extract it with ExtractTextWebpackPlugin.
I have tried dozens of different ways of configuring this, but when trying with the copy method, I get the file both inside the app.js bundle AND as a separate file. When I try with the extract method, I cannot seem to figure out how to extract javascript from the main bundle. The docs all seem to explain how to extract css.
How would I go about something like this?
You should be able to accomplish this by using multiple entry points.
https://webpack.js.org/concepts/entry-points/
entry: {
main: './path/to/file/app.js',
config: './path/to/file/config.js'
}
output: {
filename: 'output/path/[name].js'
}
A more complex option, which is typically used for vendor files, would be to use code-splitting.
https://webpack.js.org/guides/code-splitting/
I'm trying to repeat this tutorial:
https://ampersandjs.com/learn/npm-browserify-and-modules/#npm-browserify-amp-modules
But after installing browserify I don't see folder: node_modules/.bin
Instead I see a folder node_modules/browserify. Inside there is a bin folder, and Iinside of it - cmd.js and args.js.
How should I change this line of code in my case: ./node_modules/.bin/browserify app.js -o app.bundle.js to compile all js files into one file?
Or maybe I need to install browserify some other way?
Put together, the flow of creating a very simple web application with these tools might look something like this:
You simply need to point your cmd prompt to the browserify node_module, so drop the .bin if it's not there => /node_modules/browserify yourjsfile.js myjsfile.bundle.js
As far as I can understand this guide: the app.js file or yourjsfile.js needs to have all the library requirements included in order for it to work.
var squareNumbers = require('./square-numbers');
This means you need to write this file as an entry point for all your scripts you need to bundle.
TIP: try to find a youtube video or something to get a better understanding of this guide.
The dot in front of these directories tells you it's a system folder, in this case, not of your operating system, but from another "system/application", like node. It puts these kind of folders alphabetically on top to make a distinction.
I have a gulp script that watches for code changes in all javascript files. It looks like this:
gulp.watch(['./**/*.jsx', './**/*.js'], ['build:react']);
So, it watches for all .js and .jsx files from root directory, but I want to ignore node_modules directory.
How can I do that ?
You ca use gulp unwatch This removes the folder specified from your pipe. However, it's generally a good idea to have a source folder that gulp watches instead of the project root folder (then the .git directory and all sorts will be caught up in your task.
I need to minimize the number of gulp's command from my gulpfile.
This is my JS folders
js/
templates/
t-01/
t-02/
[...]
t-xxx/
My gulp task for JS (with livereload)
gulp.task('da-js', function() {
gulp.src([
'js/templates/**/*.js',
'!js/templates/**/*.min.js'
])
.pipe(concat('app.min.js'))
.pipe(gulp.dest('js/templates'))
.pipe(livereload());
});
This task is global the destination folder is templates but I want to detect the current folder of js files like is :
I'm changing js in /templates/t-01/
gulp.watch is launching
app.min.js is generating only in this folder t-01
I know the gulp.dest is not correct to target current folder but I don't know how to do this.
Thank you for your help :)
You can use gulp's watch method to monitor a folder with JS files for updates and run a series of tasks in response to some change.
gulp.task('watch-files', function() {
gulp.watch('js/templates/**/*.js', ['da-js']);
});
Here we're watching over all the JS files in templates and all it's sub-folders and running your file concatenation task (da-js) for every update. Now that we're executing the same task, your app.min.js folder will be generated in your templates folder even when you change templates/t-01/some.js.
With the watch-files task defined in your gulpfile.js, you can simply run gulp watch-files command which will start monitoring your files.
I've been working with the RequireJS optimizer to create multiple optimized JS files for my project and have come across a problem that I’ve found mentioned in other posts but have not found a solution for.
When using r.js to optimized a single file, it pulls all the JS dependency into single file and drops it into the file specified by the “out” property in the build file. However, when trying to create two optimized files (i.e. multipage project using the ‘modules’ property), r.js creates two nicely optimized files but then drops ALL folders and files from the appDir into the output directory. That is, it pulls together and minifies all JS dependencies but then copies the individual files into the output directory.
I realize that r.js is not intended to be a deployment tool so is this by design or is there a way to tell r.js to not copy dependent files and directories into the output directory.
Yes, in your r.js build file, set the removeCombined option to true in order to preserve only the modules you specified to the output location.
{
...
//If set to true, any files that were combined into a build bundle will be
//removed from the output folder.
removeCombined: true,
...
}
See the r.js documentation's example build file.