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 ...
Related
i use angular-template-cache.
follow code exist for remove template cache in app module but i need to remove all templateCache with gulp on dev machine.
myApp.run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$templateCache.removeAll();
});
});
The best way to avoid template caching is revisioning your files.
Since you are using gulp, you can revision your files using gulp-rev or gulp-rev-all.
What is revisioning?
Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css.
i.e., On every builds the filename changes and that way avoiding template caching.
You can revision every file including .html, .css, .js, images, videos etc.
Since gulp-rev-all is the latest and forked from gulp-rev, let's talk about gulp-rev-all only.
Revisioning using gulp-rev-all:
var revAll = require('gulp-rev-all');
if you want to neglect some files from revisioning, you can do that like this.
var rev = new revAll({dontRenameFile: [/^\/favicon.ico$/g, /^\/index.html/g]})
Consider all your files are in the folder dist and save the new revisioned files in the folder www.(You can save them in dist also. Considering www is your build directory.)
return gulp.src('dist/**')
.pipe(rev.revision())
.pipe(gulp.dest('www'))
Next, create a manifest file to map your files with the revisioned one. for that use .manifestFile() function. which returns a transform function that will filter out any existing files going through the pipe and will emit a new manifest file. Must be called after .revision().
.pipe(rev.manifest())
.pipe(gulp.dest('www/manifest'));
An asset manifest, mapping the original paths to the revisioned paths, will be written to www/manifest/rev-manifest.json:
{
"css/unicorn.css": "css/unicorn.098f6bcd.css",
"js/unicorn.js": "js/unicorn.273c2cin.js"
.....
.....
}
Complete code:
gulp.task('rev', () => {
var revAll = require('gulp-rev-all'),
rev = new revAll({dontRenameFile: [/^\/favicon.ico$/g, /^\/index.html/g]});
return gulp.src('dist/**')
.pipe(rev.revision())
.pipe(gulp.dest('www'))
.pipe(rev.manifest())
.pipe(gulp.dest('www/manifest'));
});
Read more about gulp-rev-all here
I've written a gulp task to rename files so that they can be versioned. The problem is that the filenames of the files that the index.html scripts reference are not changed.
For example, in my index.html:
<script src=pub/main_v1.js"></script>
But if you actually navigate through the build folder to the subdirectory pub, you will find main.js.
Here is the custom gulp task:
const gulpConcat = require('gulp-concat');
const gulpReplace = require('gulp-replace');
const version = require('./package.json').version;
gulp.task('version', function () {
var vsn = '_' + version + '.js';
gulp.src('scripts/**/*.js')
.pipe(gulpConcat(vsn))
.pipe(gulp.dest('./prodBuild'));
return gulp.src('./prodBuild/index.html', { base: './prodBuild' })
.pipe(gulpReplace(/* some regex */, /* append vsn */))
.pipe(gulp.dest('./prodBuild'));
});
What do I need to fix/add so that the original filename changes to match that in the script tag?
Note: According to the gulp-concat docs, I should be able to find the concated files at prodBuild/[vsn], where [vsn] is _v1.js. However, it is no where to be found.
Update: The files rename properly in index.html, but I can't seem to get the renaming of the original files to work. Here's a snapshot of my build directory:
prodBuild/
pub/
main.js
someDir/
subDirA/
// unimportant stuff
subDirB/
file2.js
file3.js
// ...other files and folders...
EDIT:
The issue is that you return only one of the two tasks. The first task is simply ignored by gulp, since it is not returned. A simple solutions: Split it into two tasks, and reference the one from the other, like in this SO answer.
Old Answer
This looks like a perfect case for the gulp-rename. You could simply pipe your scripts through gulp-rename, like this:
.pipe(rename(function (path) {
path.basename += vsn;
path.extname = ".js"
}))
Gulp concat is, AFAIK, made for the concatination of files, not particularly for the renaming of them.
I need to use gulp to create a clone of a project and change all file types that start with a specific word to have a different word. I have tried using gulp-replace-name.
Below is a simplified example of the folder structure of the project I want to clone. In the real project there are multiple nested folders.
originalProject/
- readme.txt
- index.php
- originalProject.info.php
- originalProject.setup.php
- assets/
- originalProject.css
- originalProject.js
- staticAssets.css
And here is an example of the cloned project:
cloneProject/
- readme.txt
- index.php
- cloneProject.info.php
- cloneProject.setup.php
- assets/
- cloneProject.css
- cloneProject.js
- staticAssets.css
As you can see, files that start with "originalProject" need to have that text replaced with "cloneProject". You will also notice that there are folders as well as other files which do not need to have their filename changed. Finally, some of the file names contain more than one period in the filename.
Here is the code I created when using gulp-replace-name. This works if there are no folders in the project. When I add folders I get an error.
var gulp = require("gulp");
var changeFilename = require("gulp-replace-name");
gulp.task("duplicate", function () {
return gulp
.src("./orignalProject/**/*")
.pipe(changeFilename(/originalProject/g, "cloneProject"))
.pipe(gulp.dest("./cloneProject"));
});
gulp.task("default", ["duplicate"]);
This is my first post to stackoverflow. I am also new to gulp. Thank you in advance for any help you can provide.
It's a bug in gulp-replace-name. When it encounters a directory it tries to call a callback cb that doesn't exist, which leads to the error you receive. It also doesn't even attempt to rename directories, which you need.
I suggest you use the gulp-rename plugin instead. It's thoroughly tested and has had a large user base for years, so you're unlikely to run into problems like this.
This a bit more verbose, but does what you want:
var gulp = require('gulp');
var rename = require("gulp-rename");
gulp.task("duplicate", function () {
return gulp
.src("./originalProject/**/*")
.pipe(rename(function(file) {
file.dirname = file.dirname.replace(/originalProject/g, "cloneProject");
file.basename = file.basename.replace(/originalProject/g, "cloneProject");
}))
.pipe(gulp.dest("./cloneProject"));
});
gulp.task("default", ["duplicate"]);
I´m trying to build a gulp task that get all bower_components files with wiredep, then concatenates them together. Then concatenate some other JS files I have on a special folder an finally minify everything.
The problem is that I don´t know if I can specify wiredep another directory additional to the bower_components directory. If that´s not possible, is there any other solution I can use?
I´m a begginer using gulp, so any other error that you can point out in how I´m thinking my task would be highly appreciated.
var wiredep = require('wiredep')(
{
directory: 'static/bower_components', // default: '.bowerrc'.directory || bower_components
}).stream;
gulp.task('scripts',function(){
return gulp
.src('index.html') //I don´t really know what to put in the src
.pipe(wiredep())
.pipe($.inject(gulp.src("More JS files if wire dep can´t handle them")))
.pipe(minify())
.pipe(gulp.dest('static/dist/src/app.min.js'));
});
I would have a method like this (perhaps in a config file at the root of the project) to get whatever you wanted wired in with wiredep:
getWiredepDefaultOptions: function() {
var options = {
directory: bower.directory,//file path to /bower_components/
};
return options;
},
Then in your gulp task, have something like this:
gulp.task('wiredep', function() {
log('Wiring the bower dependencies into the html');
var wiredep = require('wiredep').stream;
var options = config.getWiredepDefaultOptions();
return gulp
.src('./index.html')
.pipe(wiredep(options))
.pipe(gulp.dest("wherever you want your index.html"));
});
Depending on what other things you want to wire in, you would have to add an ordering of some kind using tags within the index.html.
This seems like a very simple question, but spent the last 3 hours researching it, discovering it can be slow on every save on a new file if not using watchify.
This is my directory tree:
gulpfile.js
package.json
www/
default.htm
<script src="toBundleJsHere/file123.js"></script>
toBundletheseJs/
componentX/
file1.js
componentY/
file2.js
componentZ/
file3.js
toPutBundledJsHere/
file123.js
Requirements.
On every creation or save of a file within the folder toBundleTheseJs/ I want this file to be rebundled into toBundleJsHere/
What do I need to include in my package.json file?
And whats the minimum I need to write into my gulp file?
This should be as fast as possible so think I should be using browserify and watchify. I want to understand the minimum steps so using package manager like jspm is overkill a this point.
thanks
First you should listen to changes in the desired dir:
watch(['toBundletheseJs/**/*.js'], function () {
gulp.run('bundle-js');
});
Then the bundle-js task should bundle your files. A recommended way is gulp-concat:
var concat = require('gulp-concat');
var gulp = require('gulp');
gulp.task('bundle-js', function() {
return gulp.src('toBundletheseJs/**/*.js')
.pipe(concat('file123.js'))
.pipe(gulp.dest('./toPutBundledJsHere/'));
});
The right answer is: there is no legit need for concatenating JS files using gulp. Therefore you should never do that.
Instead, look into proper JS bundlers that will properly concatenate your files organizing them according to some established format, like commonsjs, amd, umd, etc.
Here's a list of more appropriate tools:
Webpack
Rollup
Parcel
Note that my answer is around end of 2020, so if you're reading this in a somewhat distant future keep in mind the javascript community travels fast so that new and better tools may be around.
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('js', function (done) {
// array of all the js paths you want to bundle.
var scriptSources = ['./node_modules/idb/lib/idb.js', 'js/**/*.js'];
gulp.src(scriptSources)
// name of the new file all your js files are to be bundled to.
.pipe(concat('all.js'))
// the destination where the new bundled file is going to be saved to.
.pipe(gulp.dest('dist/js'));
done();
});
Use this code to bundle several files into one.
gulp.task('scripts', function() {
return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js']) //files separated by comma
.pipe(concat('script.js')) //resultant file name
.pipe(gulp.dest('./dist/')); //Destination where file to be exported
});