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
Related
I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
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!
I have lots of .jade, .styl and .coffee files resided in different subfolders.
I’d like to compile only changed files when they are changed.
I’m using gulp and I’ve come up to the following pattern:
var watch = require('gulp-watch'),
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path)
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'))
However this pattern stores compiled file into the root of ./app folder, but not to the folder where the source file resides.
I’ve tried lots of stuff and all in vain.
The problem is that there is a lack of documentation and samples for gulp-watch and others.
Could anybody tell me how to store compiled file to the its source’s folder?
The problem is that you pass e.path (i.e. the full path of every changed file) as a glob pattern to gulp.src(). This means that your glob pattern does not actually contain a glob (like * or **), in which case the directory where the file is located is used as the default value for the base option to gulp.src(). When the files are then written with gulp.dest() that base option causes the entire directory structure to get stripped.
The solution is to use the streaming variant of gulp-watch instead of the callback variant ...
gulp.src('app/**/*.styl')
.pipe(watch('app/**/*.styl'))
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
... or provide an appropriate base option to the callback variant:
watch(['app/**/*.styl'], function (e) {
gulp.src(e.path, {base: 'app'})
.pipe(stylus({use: nib()}))
.pipe(gulp.dest('./app'));
});
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
I want to Gulp Copy Multiple Files
gulp.task('copy', function(){
gulp.src(
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/jquery/dist/jquery.min.js',
'bower_components/jquery.stellar/src/jquery.stellar.js',
'bower_components/jquery-waypoints/waypoints.js',
'bower_components/jquery-easing-original/jquery.easing.1.3.js')
.pipe(gulp.dest('public/assets/js'));
});
To copy my files from my bower_components directory to my assets directory, but it is only working with the first line (bootstrap.js), all others are ignored.
I wouldn't like to pipe every single file to the destination directory.
How would I go about to do this?
regards,
George
P.S.
I am using it just for devel. In production I would concatenate and minify them before I deploy them. Nonetheless I believe that the task is clear, I want the bower_components to show up my public folder. I think that it is a little bit tedious to have all the files on the bower_components folder, only to copy them into your public directory. Is there any other best practice to use the bower component files?
Try to add [], like this:
gulp.src([
'file1',
'file2',
'file3'
])
.pipe(gulp.dest('public/assets/js'));