Bower for Codeigniter 3
- PHP 5.3.x (Composer requirement)
- CodeIgniter 3.0.x
composer require maltyxx/bower
Edit file ./application/config/config.php
set $config['composer_autoload'] = FALSE;
to $config['composer_autoload'] = FCPATH.'vendor/autoload.php';
Duplicate configuration file ./application/third_party/bower/config/bower.php
in ./application/config/development/bower.php
.
Bower file is located in ./application/config/development/bower.php
.
$config['css']['default'] = array(
array('src' => base_url('bower_components/font-awesome/css/font-awesome.css')),
array('src' => base_url('assets/css/custom.css'))
);
$config['js']['default'] = array(
array('src' => base_url('bower_components/jquery/dist/jquery.js')),
array('src' => base_url('assets/js/custom.js'))
);
Controller file is located in /application/controllers/Exemple.php
.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Exemple extends CI_Controller {
public function exemple1()
{
$this->load->add_package_path(APPPATH.'third_party/bower');
$this->load->library('bower');
$this->load->remove_package_path(APPPATH.'third_party/bower');
$this->load->view('exemple_index', array(
'css' => $this->bower->css('default'),
'js' => $this->bower->js('default')
));
}
public function exemple2()
{
$this->load->add_package_path(APPPATH.'third_party/bower');
$this->load->library('bower');
$this->load->remove_package_path(APPPATH.'third_party/bower');
$js = $this->bower->js('default');
$js[] = $this->bower->add('https://maps.googleapis.com/maps/api/js');
$this->load->view('exemple_index', array(
'js' => $js
));
}
public function exemple3()
{
$this->load->add_package_path(APPPATH.'third_party/bower');
$this->load->library('bower');
$this->load->remove_package_path(APPPATH.'third_party/bower');
$css = $this->bower->css('default');
$css[] = $this->bower->add(base_url('assets/css/custom2.css'), array('embed' => TRUE));
$this->load->view('exemple_index', array(
'css' => $css,
'js' => $this->bower->js('default')
));
}
}
View file is located in /application/views/exemple_index.php
.
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<?php foreach ($css as $file) { ?>
<link href="<?php echo $file['src']; ?>" media="all" rel="stylesheet" />
<?php } ?>
</head>
<body>
<?php foreach ($js as $file) { ?>
<script src="<?php echo $file['src']; ?>"></script>
<?php } ?>
</body>
</html>
This plugin requires Grunt >=0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-contrib-cssmin --save
npm install grunt-contrib-uglify --save
Grunt file is located in /Gruntfile.js
.
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
options: {
rebase: true,
report: "min",
sourceMap: false
},
target: {
files: {
"build/default.min.css": [
'bower_components/font-awesome/css/font-awesome.css',
'assets/css/custom.css'
]
}
}
},
uglify: {
target: {
files: {
"build/default.min.js": [
'bower_components/jquery/dist/jquery.js',
'assets/js/custom.js'
]
}
}
}
});
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.registerTask("build", ["cssmin", "uglify"]);
};
Bower file is located in ./application/config/production/bower.php
.
$config['css']['default'] = array(
array('src' => base_url('build/default.min.css'))
);
$config['js']['default'] = array(
array('src' => base_url('build/default.min.js'))
);