I've been passed down a project built through Visual Studio and it contains an index.html.bundle file. In Visual Studio these files are usually built by running the build tool and this automatically creates the index.html page by combining all the template files inside the .bundle file.
However I am running this project on a Mac and can not get access to this tool.
I want to combine all the html templates into a singular index.html template, and was wondering if there is there a tool that can automate this (i.e. gulp, etc.)?
I found a gulp tool called gulp-concat that lets me automate this process as well. After installing, I put this into my gulpfile.js as a new task.
gulp.task('html', function() {
return gulp.src([
'index1.html',
'index2.html',
'index3.html'
])
.pipe(concat('index.html'))
.pipe(gulp.dest('./'));
});
I'm sure Gulp has a tool that will do this, but if you're just trying to combine files then cat will work fine:
cat index1.html index2.html index3.html > index.html
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!!
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 have a pre-existing project that is currently using gulp.
The key libraries/frameworks/languages are:
MongoDB - Mongoose
AngularJS - With ui-router, also using ngClassify
ExpressJS - With Passport
NodeJS
Jade
Coffeescript
Sass - '.sass' format
JPG/PNG's
Currently everything is watched using live reload, minified using uglify and gzipped. My angular html view/directive snippets are sent into a template cache js file. Even the images are minified using image min.
The single page app is very modular by design, there are multiple 'pages' to the app, each page has a specific use (Take the profile page for example), using ui-route to nest views. Not all users will use each page. Hence why I am choosing to move towards WebPack with each 'page' being a module. The goal for this application is to be as reactive as possible. With potential mild load times when switching which page/module they are on.
My current project structure has a src and dist directory each with a server and client folder. the list directory can of course be safely deleted with every build. I currently have no raw js files or raw html (aside from the gulpfile.js that just requires my gulpfile.coffee), everything gets preprocessed by gulp and thats it.
So here are my questions:
Do I replace most of my gulpfile with webpack, and let webpack process everything (Whats the advantage of this). Or do I create an intermediary folder (The gulp output), then run webpack on that folder (just dealing with the minified js/css/html files). Basically, knowing what my libraries/frameworks are, and my situation, how would you structure the build process?
Can you use an ngClassify app.coffee file as an entry point? Or does it have to be compiled first. (If you can, how?)
You can certainly use Gulp to trigger your Webpack build and manage other tasks you may have however the idea of Webpack is that it is your entire build, you no longer need Gulp tasks to 'minify, 'concatenate' and 'imagemin' files etc as Webpack does all this for you by using Plugins and Loaders.
You will have to run Webpack on the project source, not an already minified bundle created by your custom Gulp build.
The angular questions I don't have an answer to I'm afraid :)
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'));
I just started playing with gulp, and it's very fast and easy to use but it seems to have a critical flaw: what do you do when a task needs to output more than one type of file?
For example, gulp-less says it doesn't even support the sourceMapFilename option. I don't want my source map embedded in my CSS file. Am I hooped? Should I just go back to using Grunt, or is there a way to deal with this?
This task will take multiple files, do stuff to them, and output them along with source maps.
It will include the source code within the maps files by default, so you don't have to distribute the source code files too. This can be turned off by setting the includeContent option to false. See the gulp-sourcemaps NPM page for more source map options.
gulpfile.js:
var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();
gulp.task("test-multiple", function() {
return gulp.src("src/*.scss")
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass())
.pipe(plugins.autoprefixer())
.pipe(plugins.sourcemaps.write("./"))
.pipe(gulp.dest("result"));
});
package.json
"gulp": "~3.8.6",
"gulp-load-plugins": "~0.5.3",
"gulp-sass": "~0.7.2",
"gulp-autoprefixer": "~0.0.8",
"gulp-sourcemaps": "~1.1.0"
The src directory:
first.scss
second.scss
The result directory after running the test-multiple task:
first.css
first.css.map // includes first.scss
second.css
second.css.map // includes second.scss
Gulp supports multiple output files fine. Please read the docs.
Example:
gulp.task('scripts', function () {
return gulp.src('app/*js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
This will read in a bunch of JS files, minify them and output them to the dist folder.
As for the gulp-less issue. You could comment on the relevant ticket.
In the docs it shows you how to have multiple output files:
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())`
.pipe(gulp.dest('./build/minified_templates'));