I want to achieve this using grunt
Goal
My main goal is to minify my index.php before placing them on my production server.
It's simple if I have 1 single index.html, but I don't.
Instead I have an index.php full with other .php files.
Each <?php ?> section is a block of HTML code.
index.php
<!DOCTYPE html>
<?php include '2015/layouts/ie.php'; ?>
<head>
<?php include '2015/layouts/meta.php'; ?>
<title>Title</title>
<?php include '2015/layouts/link.php'; ?>
<?php include '2015/layouts/style.php'; ?>
<?php include '2015/layouts/ie9.php'; ?>
</head>
<body >
<span id="web">
<?php include '2015/layouts/nav-bar.php'; ?>
<?php include '2015/layouts/welcome-sign.php'; ?>
<?php include '2015/layouts/profile.php'; ?>
<?php include '2015/layouts/skill.php'; ?>
<?php include '2015/layouts/education.php'; ?>
<?php include '2015/layouts/experience.php'; ?>
<?php include '2015/layouts/portfolio.php'; ?>
<?php include '2015/layouts/contact.php'; ?>
<?php include '2015/layouts/script.php'; ?>
</span>
<span id="print" style="display: none;" ><img src="2015/img/image.png" width="90%"></span>
</body>
</html>
Lastly
I'm wondering what is the most efficient way to concatenate all my .php files into one php file, and minify it.
I prefer to achieve this using grunt, but if someone might have other suggestion on a better solution please feel free to suggest me.
I accomplished this in 2 simple steps:
concat all the php file into 1 long php file
minify that long php file
Step1
using : grunt-contrib-concat
concat: {
php: {
src: [
'2015/layouts/ie.php',
'2015/layouts/meta.php',
'2015/layouts/link.php',
'2015/layouts/style.php',
'2015/layouts/ie9.php',
'2015/layouts/nav-bar.php',
'2015/layouts/welcome-sign.php',
'2015/layouts/profile.php',
'2015/layouts/skill.php',
'2015/layouts/education.php',
'2015/layouts/experience.php',
'2015/layouts/portfolio.php',
'2015/layouts/contact.php',
'2015/layouts/script.php'
],
dest: 'dist/php/concat.php'
}
}
Step2
using : grunt-contrib-htmlmin
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
tasks: ['clean:php'],
files: {
'index.php': 'dist/php/concat.php',
}
}
}
Final grunt.initConfig() should look like
grunt.initConfig({
concat: {
php: {
src: [
'2015/layouts/ie.php',
'2015/layouts/meta.php',
'2015/layouts/link.php',
'2015/layouts/style.php',
'2015/layouts/ie9.php',
'2015/layouts/nav-bar.php',
'2015/layouts/welcome-sign.php',
'2015/layouts/profile.php',
'2015/layouts/skill.php',
'2015/layouts/education.php',
'2015/layouts/experience.php',
'2015/layouts/portfolio.php',
'2015/layouts/contact.php',
'2015/layouts/script.php'
],
dest: 'dist/php/concat.php'
}
},
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
tasks: ['clean:php'],
files: {
'index.php': 'dist/php/concat.php',
}
}
},
});
// Load NPM Tasks
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// Default
grunt.registerTask('default', ['concat','htmlmin']);
};
Result
It will not be fun, If I don't show you guys the result. Here is it.
if you want to create html file from php you can use PHP ob_start() function.
So you create PHP file php2html.php
php2html.php
<?php
ob_start();
include 'index.php';
file_put_contents('index.html', ob_get_clean());
then create exec task in GRUNT to call php2html.php script (read more about exec task https://github.com/jharding/grunt-exec
)
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-exec');
grunt.initConfig({
exec: {
php2html: {
cmd: 'php php2html.php'
}
}
});
grunt.registerTask('default', ['exec:php2html']);
};
package.json
{
"name": "test",
"version": "0.0.0",
"description": "",
"main": "Gruntfile.js",
"dependencies": {
"grunt": "~0.4.5",
"grunt-exec": "~0.4.6"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD-2-Clause"
}
and at the last minify created index.html
Related
I have a webpage with a HTML button. The webpage is located in /var/www/html and is named index.php. In the same folder I have a file called "running.php". The contents of running.php is below:
#!/usr/bin/php
<?php
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
switch($action) {
case 'test' : test();
break;
}
}
function test(){
exec("/usr/sapint/outgoing/ihprocess",$output);
print_r($output);
}
?>
when I run the file from command line on the server as ./running.php the file executes perfectly. I want to be able to execute this file from the HTML webpage.
I have played around with all the options such as exec, permissions etc but nothing seems to work.
I currently have in my index.php file
<a id="run" class="btn btn-primary" onclick="ajaxcall()">Process Files </a>
function ajaxcall() {
$.ajax({ url: 'running.php',
data: {action: 'test'},
type: 'post',
success: function(output) {
alert(output);
}
});
}
any help would be appreciated.
I want to change default data table sProcessing as below
dTable = $('#callTable').dataTable({
"oLanguage": {
sProcessing: "<div id='callTable_processing' class='dataTables_processing'><span>Processing...</span></div>",
}
});
I have done above change in one file and it is working ,
but is there any way to put this in common file to apply in all files ?
It looks like you can load your own translations via the url option while requesting a JSON.
//https://datatables.net/examples/advanced_init/language_file
$(document).ready(function() {
$('#example').DataTable( {
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
} );
} );
`' Important : Text which is displayed when the table is processing a user action (usually a sort command or similar).
Default: Processing...
Type: string
Code example:
$(document).ready( function() {
$('#example').dataTable( {
"oLanguage": {
"sProcessing": "DataTables is currently busy"
}
} );
} );
I'm trying to connect wiredep with my project, with no success. I have the bower_components and bower.json inside assets/, and the gruntfile.js in the root directory. Here's the relevant gruntfile:
wiredep: {
target: {
src: [
'grunt-test.html',
'application/views/inc/inc_scripts.php',
'application/views/inc/inc_head.php'
],
directory: 'assets/bower_components',
bowerJson: 'assets/bower.json',
fileTypes: {
php: {
block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
detect: {
js: /<script.*src=['"](.+)['"]>/gi,
css: /<link.*href=['"](.+)['"]/gi
},
replace: {
js: '<script src="{{filePath}}"></script>', // <-- Change this line
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
},
html: {
block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
detect: {
js: /<script.*src=['"](.+)['"]>/gi,
css: /<link.*href=['"](.+)['"]/gi
},
replace: {
js: '<script src="{{filePath}}"></script>', // <-- Change this line
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
}
}
}
}
Then I run grunt wiredep --verbose and get the following output:
Running "wiredep" task
Running "wiredep:target" (wiredep) task
Verifying property wiredep.target exists in config...OK
Files: grunt-test.html, application/views/inc/inc_scripts.php, application/views
/inc/inc_head.php
Verifying property wiredep.target.src exists in config...OK
Options: src=["grunt-test.html","application/views/inc/inc_scripts.php","application/views/inc/inc_head.php"], directory="assets/bower_components", bowerJson="a ssets/bower.json",fileTypes={"php":{"block":{},"detect":{"js":{},"css":{}},"replace":{"js":"<script src=\"{{filePath}}\"></script>","css":"<link rel=\"stylesheet\" href=\"{{filePath}}\" />"}},"html":{"block":{},"detect":{"js":{},"css":{}},"replace":{"js":"<script src=\"{{filePath}}\"></script>","css":"<link rel=\"stylesheet\" href=\"{{filePath}}\" />"}}}
Done, without errors.
But nothing happens. I've made sure that I'm using the right tags and even tried adding an HTML file (grunt-test.html) to make sure it's not a filetype thing, but I'm at a loss right now.
What do you guys see?
Thanks in advance.
I'm trying Laravel Elixir and want to include bootstrap with includePaths but it does not work. Where am I going wrong?
var paths = {
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
elixir(function(mix) {
mix.sass("style.scss", 'public/assets/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});
I'm not sure if there is a reason that you want to do includePaths in your gulpfile, but for bootstrap you don't have to. The bootstrap include path is already configured out of the box in /node_modules/laravel-elixir/ingredients:
elixir.extend('sass', function(src, output, options) {
options = _.extend({
outputStyle: inProduction ? 'compressed' : 'nested',
includePaths: [elixir.config.bowerDir + "/bootstrap-sass-official/assets/stylesheets"]
}, options);
return compile({
compiler: 'Sass',
pluginName: 'sass',
pluginOptions: options,
src: src,
output: output,
search: '**/*.+(sass|scss)'
});
});
So all you should have to do is, in your gulpfile:
elixir(function(mix) {
mix.sass("style.scss");
});
And then in your style.scss:
#import "bootstrap";
I think you have to set your .bowerrc file to:
{
"directory": "vendor/bower_components"
}
but it looks like you have already done that.
I know this already has an accepted answer but I got something like this to work.
var paths = {
'bootstrap': '/bower_components/bootstrap-sass/assets/',
}
elixir(function (mix) {
mix.sass('app.scss', 'public/css', {
includePaths: [
__dirname + paths.bootstrap + 'stylesheets/'
]
});
mix.version("css/app.css");
});
Where bower_components is installed in the laravel root dir.
(From: https://laracasts.com/discuss/channels/requests/gulpfile-elixir-merge-scss-includepaths)
Another solution is using this line to compile sass or less files sitting in your vendor folder:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less");
Note: I used "composer require twbs/boostrap" to get the complete package. No bower needed.
Edit:
I output the compiled css file to the resource folder to combine it with other css files:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less", 'resources/css');
mix.styles([
"bootstrap.css"
], 'public/css/app.css');
I have ext js panel component that when submited it throws js error in firebug console.
I says
'You're trying to decode an invalid JSON String: <html>
... index.php html code here
</html><!-- use login javascript file --> <!--<script type="text/javascript" src="http://localhost:9808/recorder/js/login.js"></script>-->
<script type="text/javascript">
login = true;
</script>
<div id="login_window"> </div>' when calling method:
[nsIDOMEventListener::handleEvent]
Intersting is that the html code get concatenated with some additinal html after the "html" tag. and I get index.php html code instead of json. As far as I knwo check() function I call ecoes only json data.
My component code is like this
login_group_combo = Ext.create('Ext.form.ComboBox',
{
name: 'combo_name',
id: 'combo_id',
fieldLabel: text_label,
editable: false,
//possible view options
store: [
],
listeners:
{
focus: function(elem, e)
{
function1();
}
}
});
function1() look like this
function function1(){
form1.submit({
url: './index.php/mypage/check',
success: function(f,a){
// some code here
echo json_encode($result_array);
},
failure: function(form, action){
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Invalid data entered!');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
}
The intersting thing is that the execution enters function1(); but doesnt enter form1, success or neither faulire blocks. What could be the problem?
If you load ./index.php/mypage/check in your browser and view source, do you see json or html? Often something in the server framework is putting in the html via header and footer layout code or similiar and some config needs to be set so you can return raw json strings.