What is the right way to copy bower resources using gulp.
I want a task "build" (for dev) that will:
Transforme /src/index.jade to /build/index.html
Copy bower resources to /build/vendor/*
Copy my resources to /build/css, js, assets
Inject this resources (my and bower's) in index.html
I'm having trouble with "font awesome", because they resources (.ttf, .otf...) are referenced in font-awesome.css as: "../font/fontawesome-webfont.ttf"
I tried with wiredep, that copied js and css to /vendor (no folder structure) and did not copied the fonts.
I also tried with main-bower-files, that also copied all resources (and fonts) to /vendor folder but also with no inner structure
And tried with bowerNormalizer, that create a folder structure like "/vendor/font-awesome//" (invalid too)
And, finally, tried with gulp-bower-files, that copied all bower files (min, dist, src), that is not right also
PS: I don't want min/uglify/concat right now. This things will be done later, at "dist" task
Another approachment:
suposing you have installed:
gulp
run-sequence
main-bower-files
gulp-inject
if you dont, you can install with npm like:
npm install gulp run-sequence main-bower-files gulp-inject --save-dev
Saving your dependencies into html file
Once you have it we start to configure the gulp tasks
//Here we only copy files to folder inside source code.
//In this case ./src/lib/
gulp.task("bower:copyfiles", function(cb){
return gulp.src(mainBowerFiles())
.pipe(gulp.dest('./src/lib'))
cb();
});
//This task is the one wich insert the script tag into
// HTML file. In this case is index.html and is in root
gulp.task('bower:insertfiles', function(cb){
return gulp.src('./src/index.html') //file with tags for injection
.pipe(inject(gulp.src(['./src/lib/*.js', './src/lib/*.css'], {read: false}), {
starttag: '<!-- bower:{{ext}} -->',
endtag: '<!-- endbower -->',
relative:true
}
))
.pipe(gulp.dest('./src')); //where index.html will be saved. Same dir for overwrite old one
})
//And this task will launch the process of copy and include into index.html
gulp.task('bower:buildlib', function(cb) {
runSequence('bower:copyfiles', 'bower:insertfiles',cb);
})
Now we have half process, we need to insert the tags into index.html to let gulp know where has to include the content
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- bower:css -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</body>
</html>
and the last step is run our task in command line
gulp bower:buildlib
Notes:
Is known some libraries installed with bower has different file configuration. f.e.: when you install bootstrap, css files are not included because inside bower.json (in the library folder on bower_components or whatever you have) is set in that way. You can fix this overwriting these options in the bower.json on your project root directory adding it like this (same bootstrap example):
"overrides":{
"bootstrap":{
"main":[
"dist/js/bootstrap.js",
"dist/css/bootstrap.min.css",
"less/bootstrap.less"
]
}
}
this way you set wich files are going to be include and wich ones not.
I solved this problem like this:
gulp.task('move', ['yourDependencies'], function(){
gulp.src(['bower_components/*.js', 'bower_components/somefile'], {
base:'.bower_components/somepath'
})
.pipe(gulp.dest(build/vendor/);
}
the base options defines the base dir of the file (that means it will not create the same dirs in the build folder). For more explanations visit: Why does gulp.src not like being passed an array of complete paths to files?
I do not know how to transform .jade - files into .html files (i'm sorry).
The inject thing can be solved with the gulp-inject plugin:
https://www.npmjs.com/package/gulp-inject
Sorry for my bad english :-)
Related
Would like to:
Create a static HTML file from a view (so it should include all CSS and JS) using the technologies mentioned above (default Laravel installation)
What I tried:
Simply injecting the content of the app.js into the app.blade.php file with the following code (done this for the app.css and it worked) but it only printed out the text of the JS file:
<script defer>
{!! file_get_contents(public_path('js/app.js')) !!}
</script>
static-generator package => It is only for 4.2
Run npm production (instead of npm development) and it will minify the assets, won't leave in comments and stuff and the first solution (simply injecting it into the HTML file will work)
we're handling low level html markup as npm modules where one could specify via comment, the name of a modules whose supporting html would be injected at that location. A module contains the html, supporting SCSS and vanilla JS. From a SCSS & JS standpoint everything is buttoned up. The moment the module is installed, the SCSS is compiled, concatenated & appended to a core CSS file and then minified. The JS treatment is very similar.
Where I'm getting very hung up on is how to treat the html snippets. Here is what I've got, which works but this isn't dynamic in any way.
gulp.task('inject-atoms', function () {
gulp.src('./index.html')
.pipe(inject(gulp.src(['./node_modules/my-module-name/my-module-name.html']), {
starttag: '<!-- inject:html -->',
transform: function (filePath, file) {
return file.contents.toString('utf8')
}
}))
.pipe(gulp.dest('./'));
});
What I'd like to be able do (within the target index.html file) is specify module names whose html snippets get injected. So something like:
<!-- inject:my-module-ABC --!>
<!-- inject:my-module-XYC --!>
The only requirement being that the modules have been installed prior to trying to inject their snippets. So the gulp task would need to sweep through the index file and for each inject comment, go fetch that module's html snippet and inject it in.
Any tips on helping me move in the right direction?
Thanks!
I saw tutorials regarding webpack and i'm able to bundle everything in bundle.js and i'm able to import jquery in .js files.
In my application i'm using ajax,bootstrap-table, so i need jquery and bootstrap-table in index.html
Using webpack how can i pack and load these in html file using webpack?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
This is my webpack.config.js
var webpack =require('webpack');
module.exports = {
entry: './app.js',
output: {
filename: './bundle.js'
},
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
},
plugins:[
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery'
})
]
};
If i want jquery in js file, in my nodejs file i'm adding require('jquery') but i want to load those in html?I didn't find much materials regarding this. If anyone knows please help!!!Thanks a lot in advance!!
Are you importing bootstrap inside app.js too?
Based on the current setup, the bundle is generated in the directory in which you have your webpack config file.
if you already have your html template[index.html], then you should include the relative path of the bundled js file in the index.html
i.e. <script src="./bundle.js"></script>
else if you want the bundled file to be included dynamically in your index.html template, you should have a look at html-webpack-plugin
I have the following folder structure
_build
src
|- \images
|- \js
|- \sass
I have built a gulp process so that when finished my .build folder will contain my finished solution
i.e
_build\index.html
_build\images\*.*
_build\js\site.min.js
_build\css\site.css
I have got my gulp task to compile my sass files, and the generated file is being correctly saved into the _build\css folder
Now within my index.html file, I have the following within the head element
<!-- inject:css -->
<!-- endinject -->
Now what I am trying to get is get the following injected
<link rel="stylesheet" href="css/site.css">
but what I keep on ending up with in
<link rel="stylesheet" href="/_build/css/site.css">
This is my gulp task to do the inject. p.s. I am using gulp-load-plugins aliased to $
gulp.task('inject', function() {
return gulp
.src('./src/index.html')
.pipe($.inject(gulp.src('./build/css/site.css', {read: false}), {relative: true}))
.pipe(gulp.dest('./_build/'));
});
Based on my interpretation of reading the documentation on https://www.npmjs.com/package/gulp-inject, using the relative option it should not include /_build/ in the output. However it is not being excluded.
How do I configure gulp-inject to properly excludethe /_build/ path
You are telling inject to use the relative path to the file. But relative to what? Well, relative to the source of your injection.
If your source is:
./build/css/site.css
You are going up a directory in the tree so inject is standing at ./ where ever that may be. Meaning, build/css/site.css is the correct relative path.
Now if your source on the other hand is:
build/css/site.css
The relative path to the css is /css/site.css.
Long story short. Call inject from the correct directory:
gulp.task('inject', function() {
return gulp
.src('./src/index.html')
.pipe($.inject(gulp.src('build/css/site.css', {read: false}), {relative: true}))
.pipe(gulp.dest('./_build/'));
});
Eliminate the ./
Edit
You may need to change and play with your cwd (current working directory)
I have just started using gulp.js and I want to know if there is a way to strip out comments from my HTML files. Of course, I don't want the comments removed from the original files, just those that will be in production. Say I have a file like this:
index.html // before gulp
<html>
<!-- Some comments -->
<!-- Some more comments -->
<div>
// some stuff
</div>
</html>
index.html // after gulp
<html>
<div>
// some stuff
</div>
</html>
Part of my question is that I'm not really sure how this should work. Am I suppose to put all of my gulped HTML files (with comments removed) in a separate directory, and only push that up to my server? I still want the comments to exist in my HTML files on my testing environment (and on my repo), just not on the files that go out to production. Any help in my understanding of how to do this would be much appreciated!
with gulp-htmlmin you can do it like this:
.pipe(htmlmin(
{
removeComments: true
}
))
see https://github.com/kangax/html-minifier#options-quick-reference for all available options.
I normally use gulp-htmlmin for removing comments among many other optimizations one can do on html files. I have a SRC folder containing the source html files with comments and a BUILD folder that contains all the optimized assets (js, css and html too) and I serve the files from the build folder when in production mode.
With https://www.npmjs.org/package/gulp-preprocess you can remove the comments.
So you would have one folder - as above - for pre gulp files and one for after it.
Then you could make 2 different tasks. One that only copies the html files and one which copies them and removes the comments.
Perhaps the simplest way is with gulp-decomment:
var gulp = require('gulp');
var decomment = require('gulp-decomment');
gulp.task('default', function () {
return gulp.src('input.js')
.pipe(decomment())
.pipe(gulp.dest('dest'));
});