I want to turn the array that I get from the following link https://httpbin.org/get and turn it into a table.
My code already works but the output comes in one piece in an array. it supposed to fill the table with keys and values .
The output should look something like this :
KEY | VALUE
"origin" | "178.115.129.85"
(string) (string)
function loadDoc(url) {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById('data').innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
<title>GET Request</title>
</head>
<body>
<button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
<div class="container">
<table id="tableHead" class="table table-dark">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
In order to fill the table with keys and values, we can append 'tr' and 'td' child elements to the existing table body by replacing the line
document.getElementById('data').innerHTML = this.responseText;
function loadDoc(url) {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
eval("a = "+this.responseText)
tb = document.getElementById('data')
for (k in a)
{
tr = document.createElement('tr')
for (d of [k, JSON.stringify(a[k])])
{
td = document.createElement('td')
td.appendChild(document.createTextNode(d))
tr.appendChild(td)
}
tb.appendChild(tr)
}
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
<title>GET Request</title>
</head>
<body>
<button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
<div class="container">
<table id="tableHead" class="table table-dark">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
There is one more question, How can I access the second level, I mean all the data that is inside the "headers" will be listed separately each as a new or row ...
Here's a variant which recursively expands a data object.
function tabulate(tb, a)
{ for (k in a)
{ tr = document.createElement('tr')
for (d of [k, a[k]])
{ if (d instanceof Object) { tabulate(tb, d); continue }
td = document.createElement('td')
td.appendChild(document.createTextNode(JSON.stringify(d)))
tr.appendChild(td)
}
tb.appendChild(tr)
}
}
function loadDoc(url) {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
tabulate(document.getElementById('data'), eval("a="+this.responseText))
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
<title>GET Request</title>
</head>
<body>
<button id="submit" onclick="loadDoc('https://httpbin.org/get')" type="button" class="btn btn-success">Get Request</button>
<div class="container">
<table id="tableHead" class="table table-dark">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
What is the correct way (to this date) to use JQuery Mobile and Phonegap together?
Both frameworks need to load before they can be used. How can I be sure that both are loaded before I can use them?
You can use deferred feature of JQuery.
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
deviceReadyDeferred.resolve();
}
$(document).one("mobileinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
function doWhenBothFrameworksLoaded() {
// TBD
}
Here's how it worked for me, based on the example above
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<title>InforMEA</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
var dd = $.Deferred();
var jqd = $.Deferred();
$.when(dd, jqd).done(doInit);
$(document).bind('mobileinit', function () {
jqd.resolve();
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', deviceReady, false);
function deviceReady() {
dd.resolve();
}
function doInit() {
alert('Ready');
}
</script>
</body>
</html>
In order to use phonegap along with jquery mobile, you need to use it like this
<head>
<title>Index Page</title>
<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- Adding jQuery scripts -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<!-- Since jQuery Mobile relies on jQuery core's $.ajax() functionality,
$.support.cors & $.mobile.allowCrossDomainPages must be set to true to tell
$.ajax to load cross-domain pages. -->
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
src="cordova/cordova-1.8.0.js"></script>
<!-- Adding jQuery mobile scripts & CSS -->
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript"
src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>
</head>
<script type="text/javascript">
// Listener that will invoke the onDeviceReady() function as soon as phonegap has loaded properly
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.splashscreen.hide();
document.addEventListener("backbutton", onBackClickEvent, false); // Adding the back button listener
}
</script>
<body>
<div data-role="page" id="something" data-ajax="false">
<script type="text/javascript">
$("#something").on("pageinit", function(e) {
});
$("#something").on("pageshow", function(e) {
});
$("#something").on("pagebeforeshow", function(e) {
});
</script>
<div data-role="header">
</div>
<div data-role="content">
</div>
</div>
</body>
As many people suggested using a deferred is an okay option as long as you don't care what order deviceready and mobileinit happe in. But in my case, I needed a few pageshow events when the application first loaded and mobileinit and by extension those pageshow/pagebeforeshow/etc events were all firing before deviceready finished, so I couldn't bind to them properly using a deferred on them. This race condition was not a good thing.
What I needed to do was make sure 'mobileinit' didn't take place until after 'deviceready' was already fired. Because mobileinit fires immediately when you load JQM I chose to use jQuery.getScript to load it AFTER deviceready was already finished.
<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/async.min.js"></script>
<script src="js/app.js"></script>
<script>
document.addEventListener(
'deviceready',
function () {
$('body').css('visibility', 'hidden');
$(document).one("mobileinit", function () {
app.init();
$('body').css('visibility', '');
});
$.getScript('js/jquery.mobile-1.2.0.min.js');
},
false
);
</script>
The reason I'm hiding the body is that a side effect of this method is a half second of visibility of the original HTML document before jquery.mobile loads. In this case hiding it an extra half second of empty space is preferred to seeing the unstyled document.
I believe that it isn't necessary to use the deferred feature. (Maybe this isn't necessary with newer versions of phonegap?) I have this in the head of my index.html file and everything works fine. I do think that the order of including jquery, phonegap and jquery mobile are important.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!-- Adding jQuery -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<!-- Add Phonegap scripts -->
<script type="text/javascript" src="phonegap.js"></script>
<!-- Add jQuery mobile -->
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
<title>MY TITLE</title>
</head>
this is work for me. base on dhaval,this sample when I learn using sqlite
<!DOCTYPE html>
<html>
<head>
<title>Cordova Sqlite+Jquery</title>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">`
// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-1.8.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Populate the database
//
function populateDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS DEMO');
tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
}
// Query the database
//
function queryDB(tx) {
tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}
// Query the success callback
//
function querySuccess(tx, results) {
var len = results.rows.length;
//console.log("DEMO table: " + len + " rows found.");
$('#result').html("DEMO table: " + len + " rows found.");
var listval = '';
for (var i=0; i<len; i++){
//console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data = " + results.rows.item(i).data);
listval += '<li>'+ results.rows.item(i).data + '[' + results.rows.item(i).id + '] </li>';
}
$('#listItem').html(listval);
}
// Transaction error callback
//
function errorCB(err) {
console.log("Error processing SQL: "+err.code);
}
// Transaction success callback
//
function successCB() {
var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
db.transaction(queryDB, errorCB);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
// Now safe to use the Cordova API
//alert('ready');
var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
db.transaction(populateDB, errorCB, successCB);
//$('#result').html('hello');
}
</script>
</head>
<body onload="onLoad()">
<div>result:</div><div id="result"></div>
<ul id="listItem">
</ul>
</body>
</html>
To build on #Jeffrey's answer, I found a much cleaner way which hides the HTML markup until JQM has finished processing the page and renders the first Page element, since I've noticed that 1/2 second flicker of bare markup before JQM renders.
You only need to hide all the markup with css...PageShow() by JQM will toggle the visibility for you.
//snip
<style type="text/css">
.hide {
display:none;
}
</style>
//snip - now the markup notice the hide class
<div id="page1" data-role="page" class="hide">
//all your regular JQM / html form markup
</div>
//snip -- down to the end of /body
<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
document.addEventListener(
'deviceready',
function () {
$(document).one("mobileinit", function () {
//any JQM init methods
});
$.getScript('js/jquery.mobile-1.2.0.min.js');
},
false);
</script>
The following worked for me on PG 2.3 and JQM 1.2, incl. Facebook Connect Plugin:
<head>
<script src="./js/jquery-1.8.2.min.js"></script>
<script>
$.ajaxSetup({
dataType : 'html'
});
var dd = $.Deferred();
var jqd = $.Deferred();
$.when(dd, jqd).done(function() {
FB.init({ appId: auth.fbId, nativeInterface: CDV.FB, useCachedDialogs: false });
});
$(document).bind('mobileinit', function () {
jqd.resolve();
});
</script>
<script src="./js/jquery.mobile-1.2.0.min.js"></script>
<script>
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
$.mobile.ajaxEnabled = false;
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
$('[data-role=page]').live('pagecreate', function(event) {
tpl.renderReplace('login', {}, '#content-inner', function() {
auth.init();
});
});
</script>
<script src="./js/cordova-2.3.0.js"></script>
<script src="./js/cdv-plugin-fb-connect.js"></script>
<script src="./js/facebook_js_sdk.js"></script>
<!--some more scripts -->
<script>
document.addEventListener('deviceready', function() {
dd.resolve();
}, false);
</script>
<head>
Loading of PhoneGap is slightly different than loading of jQuery. jQuery works more as a utility library so you include that and it is available for use immediately. On the other hand PhoneGap requires support from native code for proper initialization so it is not ready to use soon after included in the page.
Phonegap suggests to register and wait for deviceready event executing any native specific code.
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Example</title>
<script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
<script type="text/javascript">
// jquery code here
</script>
<script type="text/javascript" charset="utf-8" src="lib/android/cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is ready
function onDeviceReady() {
// write code related to phonegap here
}
</script>
</head>
<body onload="onLoad()">
<h1>Phonegap Example</h1>
</body>
</html>
For more info check doc
I'm trying to build an extension that scrapes email IDs from a webpage. The problem is that...
The popup.html view is not updating the new values of $scope.emailList and $scope.count in the controller in popup.js. However, when I do Inspect Popup it displays the new values attached to the $scope variables but I see no errors that I can look into and work on.
popup.js
var app = angular.module('emailScraper',[]);
app.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
//Fetch URL of current Tab open in Chrome
chrome.tabs.query({
active: true,
currentWindow: true
}, function(tabs) {
// and use that tab to fill in out title and url
var tab = tabs[0];
$scope.cpUrl = tab.url;
console.log($scope.cpUrl); //I SEE ONLY THIS LINE WHEN I INSPECT POPUP
});
$scope.appLoaded = false;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log("Message received: ", request); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.emailList = request;
$scope.count = Object.keys($scope.emailList).length;
console.log("Emails found: " + $scope.count); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.appLoaded = true;
sendResponse({status: "Received JSON data!"});
});
}]);
content script - relevant portion
var jsonData = scrape(); // scrape() is included in the Content Script which I've chosen to leave out here.
console.log(jsonData);
chrome.runtime.sendMessage(jsonData, function(response) {
console.log(response);
});
background.js
var background = {
injectScript: function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "myscript.js"});
});
}
};
background.injectScript();
popup.html
<!DOCTYPE html>
<html ng-app="emailScraper">
<head>
<!--
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<link rel="stylesheet" href="css/lib/concise-v3.4.0-UI-dist/concise.min.css">
-->
<link rel="stylesheet" href="css/lib/materialize/materialize.min.css" media="screen,projection">
<link rel="stylesheet" href="css/app/popup.css">
</head>
<body ng-controller="AppCtrl">
<div id="popWindow">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<h5 class="brand-logo">Email Scraper</h5>
<span class="badge">
<a># found </a>
<a>{{count}}</a>
</span>
</div>
</nav>
</div>
<div class="progress" ng-hide="appLoaded">
<div class="indeterminate"></div>
</div>
<div class="progress" ng-show="appLoaded">
<div class="determinate" style="width: 100%"></div>
</div>
<div class="collection" ng-if="count > 0">
<h6>{{email}}</h6>
</div>
<div ng-if="count === 0">
<p class="flow-text"> Sorry, No Email IDs found.</p>
</div>
</div>
<script type="text/javascript" src="js/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/angular_1.5.6/angular.min.js"></script>
<script type="text/javascript" src="js/lib/materialize/materialize.min.js"></script>
<script type="text/javascript" src="js/app/popup.js"></script>
</body>
</html>
i have signed up at inmobi,have made a banner ad and tried my best to get it working to no avail,seems like the ad div appears,but not the ad itself
here is my code.as yoU CAN see my property id provided by inmobi for ad has been entered.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="components/loader.css">
<script src="js/cssua.min.js"></script>
<script src="js/inmobi.js"></script>
<script>
var inmobi_conf = {
siteid : "48a58302dd214f5ea5483a3f9d95a28e", // your Property ID
slot: 15,
test: true,
manual: true,
autoRefresh: 20,
targetWindow : "_top", // default "_top"
onError : function(code){
if(code == "nfr"){
console.log("Error getting the ads!");
}
if(code!=="nfr"){
console.log("getting the ads!");
}
}
};
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
console.log('device is ready');
showAds();
}
function showAds(){
var adsElement = document.getElementById('ads');
_inmobi.getNewAd(adsElement);
}
</script>
</head>
<body>
<div data-role="page">
<header data-role="header" data-position="fixed" data-theme="c">
<h1>Inmobi Client</h1>
</header>
<div data-role="content">
<img src="images/logo.png" width="300px">
</div>
<div data-role="header" data-position="fixed">
<div id="ads"></div>
</div>
</div>
</body>
</html>
I've been trying to create a build system using gulp in a Laravel project and the only problem left right now is renaming the right file names inside my master.blade.php file. As it is now, it's only following the filenames provided in the gulp-useref parameters, but the files revisioned by gulp-rev are not replaced by gulp-rev-replace.
Here is my gulp task:
gulp.task('build', ['clean', 'scss', 'js', 'master'], function() {
var assets,
jsFilter = $.filter('**/*.js'),
cssFilter = $.filter('**/*.css');
return gulp.src('app/views/layouts/master.blade.php')
.pipe(assets = $.useref.assets({searchPath: '/'}))
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe($.rev())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe($.rename(function(path) {
if(path.extname === '.php') {
path.dirname = 'app/views/layouts';
} else {
path.dirname = 'public/assets';
}
}))
.pipe(gulp.dest('./'))
.pipe($.size({title: 'build files', showFiles: true}))
.on('end', function() {
setTimeout(function() {
// force watchify to close all watchers
process.exit();
});
});
});
The default master.blade.php would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<!-- build:css assets/index.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<link rel="stylesheet" href="/.tmp/index.css">
<!-- endbuild -->
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<!-- build:js assets/index.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/lodash/dist/lodash.compat.js"></script>
<!-- endbower -->
<script src="/.tmp/index.js"></script>
<!-- endbuild -->
</body>
</html>
and the result will always look like this despite the gulp-rev-replace pipe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<link rel="stylesheet" href="assets/index.css">
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<script src="assets/index.js"></script>
</body>
</html>
I figured out the problem, The gulp-rev-replace documentation mentions that they only replace files with extensions ['.js', '.css', '.html', '.hbs'] by default. By passing ['.php'] in the replaceInExtensions option.