Here's my index.html file:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Price Tracker</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap-css/css/bootstrap.min.css" />
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap-css/js/bootstrap.min.js"></script>
<!-- endbower -->
</body>
</html>
My gulpfile picks up the bower dependencies correctly and adds them to the index. But I want gulp to pick up a custom CSS file.
Is this possible ?
Yeah you can embed any CSS file path you want, this is what I'm using htmlReplace
https://github.com/VFK/gulp-html-replace
npm install --save-dev gulp-html-replace
// Task to make the index file production ready
var htmlReplace = require('gulp-html-replace');
gulp.task('build:index', function() {
gulp.src('app/index.html')
.pipe(htmlReplace({
//'app-css' : 'assets/'+version+'/css/dashboard.css',
'app-css' : 'assets/css/dashboard.css',
}))
.pipe(gulp.dest('build/'));
});
Then in your markup
<!-- build:app-css -->
<!-- Anything between the build comments gets replaced -->
<link href="dev/assets/css/dashboard.css" rel="stylesheet">
<!-- endbuild -->
This is how you delete files, with run-sequence
https://www.npmjs.com/package/del
// Clear out all files and folders from build folder:
gulp.task('build:cleanfolder', function(cb) {
del([
'build/**'
], cb);
});
This is how you pipe different tasks together and in order
gulp.task('build', function(cb) {
runSequence(
'version', // Save new version
'build:del-assets-static', // Delete old static folder in app/assets
'build:move-files', // Move files into new static folder
'html-templates', // Generate $templateCache file of HTML partials
//'build-highcharts-css', // Minify and concat highcharts styles
'build-app-css', // Minify and concat app styles
'highcharts-js', // Minify and concat highcharts scripts
'build-app-js', // Minify and concat app scripts
'build:copy', // Deletes old build folder
'build:remove', // Copy then Remove unneeded assets from build
'build:version', // Move assets into versioned build folder
'build:index', // Replace scripts in index.html
'build:final-clean', cb); // Remove app.min.js from build folder
});
gulp-inject is probably what you are looking for. It works similar to Wiredep and lets you specify where to insert css/js tags into the html for every match found (specified by glob pattern)
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
// Gulpfile.js
var gulp = require('gulp');
var inject = require('gulp-inject');
gulp.task('custom', function(){
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
return gulp.src('./index.html')
.pipe(inject(sources))
.pipe(gulp.dest('./build'));
})
Related
I'm trying to implement jQuery FloatLabel in my ionic app -> https://github.com/m10l/FloatLabel.js/tree/master
I used that plugin because that plugin also was implemented in a web version, so to be uniform in design.
I included that inside src/index.html with jquery
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
I want to execute this script on page load
$( '.js-float-label-wrapper' ).FloatLabel();
Here's my src/index.html code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<link href="build/main.css" rel="stylesheet">
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
It works on web version but not in ionic. How do I implement that on ionic?
I want it like this fiddle -> https://jsfiddle.net/acrmktq3/
link jquery.js in your index.html:
<script src="assets/js/jquery-3.2.1.min.js"></script>
run in node:
npm install jquery
and import it in your page like:
import * as $ from "jquery";
Try adding your JavaScript code in the bottom of your body like this:
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</body>
You're addng it before your app initialization, the main.js wasn't even loaded and you've already executed your code, so using it on the bottom of your code should do the trick.
Also, have you ever tried using this FloatLabel in a Ionic application? Since the page may not be loaded and the code already had been executed you need it to be more "Angular way". You can use it inside the component that's having the floating label, just use this to be able to use JQuery inside your component:
declare var $: any; // declare this bellow your page imports to be able to use jQuery
Or you can try Ionic floating Label, so there's no need to have JQuery and other library inside your project, even if it's not "uniform" design
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<!-- Use the floating attribute to have your label to float when you focus on the input -->
<ion-input></ion-input>
</ion-item>
Hope this helps.
I was trying to host an existed project on Firebase which already have a css and js file. But it didn't seem to include my css and js files into the website.
I followed all of these steps:
https://www.youtube.com/watch?v=meofoNuK3vo&index=21&list=PLl-K7zZEsYLmnJ_FpMOZgyg6XcIGBu2OX
The project directory now looks like this:
\public (folder) (containing: index.html 404.html)
\css (folder) (containing: style.css)
\js (folder) (containing: index.js)
firebase.json
.firebaserc
Here is the website: https://together-cb.firebaseapp.com/
The index file looks like:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css">
<!-- update the version number as needed -->
<script defer src="/__/firebase/4.8.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/4.8.0/firebase-auth.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-database.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-messaging.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<script src="/__/firebase/4.8.0/firebase.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div class="main-view">
....
</div>
</body>
</html>
I had the same issue but I added this line below my body tag and it solved.
<script src="/__/firebase/6.1.1/firebase-firestore.js"></script>
also, you can see the instruction here
https://firebase.google.com/docs/web/setup
Make soure that all your assets(css,js,img) and html are in /public
I have 5 HTML files in my project and every has a useref block in the bottom like this:
<!-- build:js static/js/main.js -->
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
Common JS file in all 5 files are plugins.js . I need that JS file in every HTML file and its repeating in all my files.
My second HTML file has this block (again plugins.js is there) :
<!-- build:js static/js/main.js -->
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
And my fifth HTML file has this block:
<!-- build:js static/js/main.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
So in every file im using plugins.js and in some files i use some other libraries. But when i run task this three files are not concatenated into main.js. Only thing in main.js is content from plugins.js . Other libraries are not included into main.js.
Why is that so? Can i even use this plugin like that?
My gulp task:
gulp.task('compress:js:html', ['clear:dist'], function () {
return gulp.src('./*.html')
.pipe(useref())
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dist/'))
});
All your HTML files specify the same location for the concatenated file (static/js/main.js), but they all specify different source files that should be concatenated. Depending on the order in which your HTML files are processed you end up with a different static/js/main.js. In your case the one from your first example.
You have two options:
For each HTML file specify a different location for the concatenated file:
HTML File 1:
<!-- build:js static/js/main1.js -->
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
HTML File 2:
<!-- build:js static/js/main2.js -->
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
HTML File 3:
<!-- build:js static/js/main3.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
This will reduce the number of requests a browser has to make for each page, but it doesn't leverage browser caching.
Refer to all JS files in each HTML file, whether you need the JS file for that specific page or not. That means you have the following in all three of your HTML files:
<!-- build:js static/js/main.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
Since browsers will cache the resulting main.js file it will only have to be downloaded once.
I have loaded some external JavaScript and some inline JavaScript to View page in my MVC project. I have heard about Response filter to move these scripts to the end of the page after content loaded but I have not exact knowledge about this.
How can I achieve this in my whole project?
This article http://weblogs.asp.net/imranbaloch/bundling-and-minifying-inline-css-and-js describes a solution for your problem.
I hope it helps.
I would use build tasks (either using Grunt or Gulp) to combine and minify your scripts as static content and to rewrite your HTML to include CSS and JS resources where you want them in your page.
You could use a Gulp task such as https://www.npmjs.com/package/gulp-uglify to combine and minify and then https://github.com/jonkemp/gulp-useref
The whole task would look something like this:
gulp.task('html', function () {
var assets = useref.assets();
return gulp.src('app/*.html')
.pipe(assets)
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});
In addition to minifying and combining assets, it allows you to define which parts of your HTML you want to target for the output:
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/one.js"></script>
<script type="text/javascript" src="scripts/two.js"></script>
<!-- endbuild -->
</body>
</html>
And rewrite it into this:
<html>
<head>
<link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
<script src="scripts/combined.js"></script>
</body>
</html>
It feels like 99% of all tutorials about using gulp.js and the right workflow showing only the part where the js / css files are (for example) minified and concatenated.
But what I haven't found is what to do next to get the right index.html file with the new processed files correctly referenced inside without the need of manual editing the file.
Example index.html:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
[...]
<script src="javascript/angular.min.js"></script>
<script src="javascript/angular-animate.min.js"></script>
<script src="javascript/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="javascript/app/app.js"></script>
<script src="javascript/app/controllers/controller.js"></script>
<script src="javascript/app/services/factory.js"></script>
</body>
And the result should be something like this:
<head>
<link rel="stylesheet" href="css/combined.css">
</head>
<body>
[...]
<script src="javascript/combined.js"></script>
</body>
where inside the combined.* files are all css/js files concatenated but only these minified with gulp, that do not end with *.min.js or *.min.css.
Gulp-usemin and gulp-useref are not suitable for, because they concatenate all files inside a build block and after that can you minify the (combined) result (what would minify already minified files again - I do not want that).
How can this missing last step look like to make the workflow complete?
As it seams not to be any satisfying answer / solution to my question as stated above, I ended up using another approach that works as expected good on production side and have benefits during development.
I am using always the unminified versions of the vendor libs (as AngularJS, jQuery etc.) and the HTML looks then like this (with special comments for useref):
<head>
<!-- build:css css/styles.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<!-- endbuild -->
</head>
<body>
[...]
<!-- build:js js/scripts.js -->
<script src="javascript/angular.js"></script>
<script src="javascript/angular-animate.js"></script>
<script src="javascript/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="javascript/app/app.js"></script>
<script src="javascript/app/controllers/controller.js"></script>
<script src="javascript/app/services/factory.js"></script>
<!-- endbuild -->
</body>
The gulpfile.js:
var gulp = require('gulp'),
useref = require('gulp-useref'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify'),
cleanCSS = require('gulp-clean-css'),
rev = require('gulp-rev'),
revReplace = require('gulp-rev-replace');
gulp.task('default', ['combineminify']);
gulp.task('combineminify', function () {
return gulp.src('index.html')
.pipe(useref())
.pipe(gulpif('*.js', uglify({
preserveComments: 'license'
})))
.pipe(gulpif('*.css', cleanCSS({
keepSpecialComments: '*'
})))
.pipe(gulpif('*.js', rev()))
.pipe(gulpif('*.css', rev()))
.pipe(revReplace())
.pipe(gulp.dest('/path/to/destination/folder/'));
});
This gulp script creates then a new index.html file in the destination folder:
<head>
<link rel="stylesheet" href="css/styles-1627b7eb0c.css">
</head>
<body>
[...]
<script src="js/scripts-595ed88b32.js"></script>
</body>
And the expected two uglified and minified *.css and *.js files (with a calculated string attached to the filename to avoid caching issues in some browsers) are created in the folders ./css and ./js.
Try gulp-html-replace, wrapping your scripts or css:
<!-- build:test-js -->
stuff to be replaced
<!-- endbuild -->
In your gulpfile:
.pipe(htmlreplace({
'test-js': 'myfile.min.js'
}))