README

Bower for CodeIgniter 3

要求

PHP 5.3.x (Composer 要求)
CodeIgniter 3.0.x

安装

步骤 1：通过 Composer 安装

运行 composer

composer require maltyxx/bower

步骤 2：配置

编辑文件 ./application/config/config.php 将 $config['composer_autoload'] = FALSE; 修改为 $config['composer_autoload'] = FCPATH.'vendor/autoload.php';

复制配置文件 ./application/third_party/bower/config/bower.php 到 ./application/config/development/bower.php。

步骤 3：示例

Bower 文件位于 ./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'))
);

控制器文件位于 /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')
        ));
	}

}

视图文件位于 /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>

步骤 4：使用 Grunt 编译

此插件需要 Grunt >=0.4.0

如果您之前没有使用过 Grunt，请确保查看入门指南，因为它解释了如何创建 Gruntfile 以及如何安装和使用 Grunt 插件。熟悉该过程后，您可以使用以下命令安装此插件

npm install grunt-contrib-cssmin --save
npm install grunt-contrib-uglify --save

Grunt 文件位于 /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"]);
};

步骤 5：例如生产环境

Bower 文件位于 ./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'))
);

maltyxx / bower

维护者

详细信息