Configure the gulp bundling destination folder outside the project folder - gulp

We have bundling our application using gulp process(using aurelia-bundler). As of now the bundle process destination folder resides inside the project folder named "dist". We need to place the destination folder outside the project folder
gulp.task('bundle', function (callback) {
runSequence('unbundle',
'bundle-config',
'copy-app-files',
'compress',
function () {
});
});

In theory, you just have to change the exportSrvRoot variable of the build/paths.js file. For instance:
//var exportSrvRoot = 'export/';
var exportSrvRoot = '../'; //this is outside of the project folder.
Now, the gulp export command will export the files to the folder above the project folder. The solution is the same for build output (gulp build/bundle), but you'd have to change the outputRoot variable instead of exportSrvRoot.
However, there is a problem in this approach. Since your export folder is outside of the project folder, if you run gulp export, you will get an error saying that gulp.del cannot delete a folder that is outside of the project folder. This could be solved by passing additional parameters to gulp.del, but the task uses vinyl-paths to call gulp.del, preventing you to send any additional parameters for it =/.
One of the ways to solve the above problem is deleting the line 36 of the export-release.js:
// use after prepare-release
gulp.task('export', function(callback) {
return runSequence(
'bundle',
//'clean-export', <---- this line
'export-copy',
callback
);
});
In this way, gulp export won't try to delete the folder, preventing the error. But now, you must delete the export folder manually before each time you run gulp export.
Another way to solve this is rewriting the clean-export task in order to remove its dependency from vinyl-paths.
Hope this helps!

Related

Gulp js running twice for the watch statement

I see the console log statement that js task run twice once I change any of the javascript files. I wonder why it run two times for each change?
var gulp = require('gulp');
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
gulp.task('default', function() {
gulp.watch("public/js/**/*.*", ["js"]);
});
gulp.task("js", function(){
var js = [
"public/js/**/*.js",
"!public/js/api/**/*.js"
];
gulp.src(js)
.pipe(concat("app.min.js"))
.pipe(uglify())
.pipe(gulp.dest("public/js"));
});
Console
[13:02:27] Starting 'js'...
[13:02:27] Finished 'js' after 1.6 ms
[13:02:27] Starting 'js'...
[13:02:27] Finished 'js' after 5.1 ms
The problem is that you are watching the same directory which is used as the destination directory in the task you run when the change is detected. Currently, your build flow looks like this:
Imagine you're modifying a file public/js/script.js.
The watch task detects the change and starts your custom js task. As the result, the public/js/app.min.js file is created.
Since the app.min.js is inside the watched directory, the watch task detects another change, hence the js task is executed once more. You actually should run into a loop, but Gulp seems to be smart enough do detect such a cycle.
The best solution for this issue is to separate source files from the output. In your task pipe, set the destination folder to something outside the source directory, for example:
.pipe(gulp.dest("dist/js"));
After that, your project should has the following structure:
public
js
script.js
dist
js
app.min.js
grunfile.js
...
Where the public directory is used to keep the source files that are watched and the dist directory holds the output of the build. If I were you, I would reconsider renaming the public directory to something more descriptive like src, but that is up to you :)

Where do I put client code source files (JavaScript and CSS before minification etc.) in an asp.net 5 project?

I want to have a src folder that contains all my client side code e.g. css, scripts, fonts, images etc. I want to use gulp to minify / combine some of these files and then copy the files into a dist folder. A folder structure typically looks something like this (outside of the .net world).
I am now wondering how I can structure something like this in asp.net 5. Is wwwroot folder the same as the dist folder? or should I have both "src" and "dist" folders under the wwwroot folder?
I like to keep client source file as a separate project. You can invoke glup build task to compile and copy compiled code into MVC project.
I asked this question before, take a look.
The name of the folder where the web server serve public files from (web server root or public folder) is optional in asp.net 5.
With the project templates that comes with visual studio this folder name is by default named to "wwwroot".
You change the name by modifying the property "webroot" in project.json.
Its therefore possible to serve your public files from a folder named "dist". If you are using a project template in visual studio you can rename the "wwwroot" folder to "dist", just change the "webroot" property in project.json to "dist".
If you put your "dist" and "src" folders in a folder called "wwwroot" and this folder is specified as the "webroot" directory in project.json then both of these folders will be
accessible via web requests. If you put the "src" folder outside the "wwwroot" folder then it will not be available.
src folder should be outside wwwroot. wwwroot will replace the dist folder ( so replace it in gulp script). If you run the application from visual studio it will look for it there. You do not lose any gulp functionality even serve works from there. So using VS debug vs serve and browserlink/livereload etc is a matter of preference.
The below is just a sample of separate gulp tasks that work in Visual Studio. For demo purposes. Should help you get the idea and get started
/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/
var styleType = "SCSS"; // CSS/LESS
var wwwroot = 'wwwroot';
var gulp = require('gulp');
var del = require('del');
var debug = require('gulp-debug');
gulp.task('Clean:Delete', function () {
del(wwwroot+"/*", '!web.config').then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
});
gulp.task('Copy:Fonts', function () {
gulp.src(['src/fonts/**/*'], {
base: 'src'
})
.pipe(debug())
.pipe(gulp.dest( wwwroot ));
});
gulp.task('Copy:Images', function () {
gulp.src(['src/images/**/*'], {
base: 'src'
})
.pipe(debug())
.pipe(gulp.dest(wwwroot));
});
gulp.task('Copy:HTML', function () {
gulp.src(['src/html/**/*'], {
base: 'src/html'
})
.pipe(debug())
.pipe(gulp.dest(wwwroot+'/views'));
});
Tasks are listed in Task Runner Explorer and can be controlled from IDE again a matter of preference IDE vs CMD
For completion sake. Lately ther eis an emerging number of devs using Visual Studio Code for FrontEnd https://code.visualstudio.com/b?utm_expid=101350005-28.R1T8FshdTBWEfZjY0s7XKQ.1&utm_referrer=https%3A%2F%2Fwww.google.com%2F

How to reference own css file in ASP.NET 5?

I am trying to load a file called styles.css which is located in
~/Content/css/styles.css
What I tried is adding it to the _Layout page
<link rel="stylesheet" href="~/Content/css/styles.css" />
This gives a 404 on that location.
I like the way how bower handles external libraries and gulp magically does all the other stuff like minifying a file when I request a minified version, but through all this newness I cannot add a simple static file of my own.
Could someone be so kind to help me reference my own styles.css file?
Joe wrote in his answer:
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot.
To elaborate on this:
In Gulp there are four APIs, being:
gulp.task: Define a task
gulp.src: Read files
gulp.dest: Write the files
gulp.watch: Watch the files
To write files from example CSS files from a source to a destination (what I wanted to do), you can define a task as follows:
var gulp = require('gulp')
var paths = {
webroot: './wwwroot/',
cssContent: './Content/css/**/*.css'
};
paths.jsDest = paths.webroot + 'js/';
paths.cssDest = paths.webroot + 'css/';
gulp.task('build:ccs', function () { // Define a task called build.css
console.log('Building Cascading Style Sheets...')
gulp.src(paths.cssContent) // Look for files in the source.
// Do optional other stuff
.pipe(gulp.dest(paths.cssDest)); // Put it in the wwwroot.
});
All this will do is move files from the gulp.src cssContent (my local directory) to the gulp.dest cssDest (the webroot).
To run this before every build specify this go to "View > Other Windows > Task Runner Explorer", right click on the task that appeared called build:ccs and select "Bindings > Before Build".
You can do a lot more with Gulp like minifying, combining, analyzing, adding references to file, but these are the basics.
Note: I learned the above from JavaScript Build Automation With Gulp.js on Pluralsight.
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot

Having trouble gulping, what is wrong with my gulpfile that copies and renames files?

My default task is to execute the "step2" task, which depends on step1. Step1 copies over a bunch of files, step2 is supposed to rename a single file, "file1.txt". My default task says to just do "step2". I am using gulp-rename.
gulp.task('step1', function() {
var files = [
'./folder1/**/*.*',
'./file1.txt'
];
return gulp.src(files, {base: "."})
.pipe(gulp.dest("./build"));
});
gulp.task('step2', ['step1'], function() {
gulp.src('./build/file1.txt')
.pipe(rename("./renamed-file1.txt"))
.pipe(gulp.dest("./build"));
});
The problem is I don't see a renamed file at all, and instead I see both the copy of the file I copied over and the renamed file. How do I fix this?
Also, why is it that for "./renamed-file1.txt", I have to specify it that way to ensure it gets in the build directory as opposed to ./build/renamed-file1.txt?
The gulp-rename plugin renames the files in the stream not the ones in the file system: I guess you should split your step1 in to 2 gulp flows renaming your file while copying it.

Gulp - copy a file in all subdirectories

I want to copy a file /stubs/foo.txt in all the subdirectories of /something/, for example
/something/foo.txt
/something/else/foo.txt
I tried:
gulp.task('copy', function () {
return gulp.src('/stubs/foo.txt')
.pipe(gulp.dest('/something/**/*'));
});
But it seems Gulp does not support variable in the destination folder.
Not an ideal solution, but you could use multiple destination pipes.