Codeigniter 3 project via Composer with Bower and Gulp

Setup Codeiginiter

Please make sure that you have properly configured composer on your machine before following the steps in this tutorial. More info here:

https://getcomposer.org/doc/00-intro.md

Assumptions made in the commands:

  • Your projects folder is called “Code”;
  • The project we use is called “our_new_project”;

Steps to follow:

  1. cd Code
  2. composer create-project kenjis/codeigniter-composer-installer our_new_project
  3. cd our_new_project
  4. php bin/install.php translations 3.1.0
  5. composer update
  6. composer require kenjis/codeigniter-cli --dev
  7. php vendor/kenjis/codeigniter-cli/install.php
  8. Move the contents of the public folder to the root of the project and edit the content of the index.php file to match the change (paths in $system_path and $application_folder);
  9. php cli

Using:

  • https://github.com/kenjis/codeigniter-composer-installer
  • https://github.com/kenjis/codeigniter-cli
  • https://www.youtube.com/watch?v=YFoFCD4D9qk

Setup bower, gulp and minimal packages

Please make sure that bower and npm are globally installed on your machine.

Steps to follow:

  1. cd Code
  2. cd our_new_project
  3. bower init
  4. bower install bootstrap --save-dev
  5. npm install --save-dev gulp
  6. npm install --save-dev main-bower-files
  7. npm install --save-dev gulp-uglify
  8. npm install --save-dev gulp-minify
  9. npm install --save-dev gulp-concat
  10. npm install --save-dev gulp-filter
  11. npm install --save-dev gulp-flatten
  12. npm install --save-dev gulp-replace

Create a file named gulpFile.js and edit its content to:

var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify');
var filter = require('gulp-filter');
var flatten= require('gulp-flatten');
var replace= require('gulp-replace');
 
gulp.task('assets', function() {
    return gulp.src(['bower_components/**/*'], {
        base: './bower_components'
    })
    .pipe(filter([
        '**/*.{png,gif,svg,jpeg,jpg,woff,woff2,eot,ttf}'
    ]))
    .pipe(flatten({ includeParents: -1}))
    .pipe(gulp.dest('./public/libraries/'));
});

gulp.task('js', function() {
    gulp.src(mainBowerFiles('**/*.js'))
        .pipe(concat('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./public/libraries/'));
});

gulp.task('css', function() {
    gulp.src(mainBowerFiles('**/*.{css,scss}', {
            overrides: {
                bootstrap: {
                    main: [
                        './dist/css/bootstrap.min.css'
                    ]
                }
            }
        }))
        .pipe(concat('all.min.css'))
        .pipe(replace('../fonts', './fonts'))
        .pipe(minify())
        .pipe(gulp.dest('./public/libraries/'));
});


// The default task (called when you run `gulp` from cli)
gulp.task('default', ['assets', 'js', 'css']);

More steps:

  1. gulp
  2. Please remember to run the gulp command after adding any new library;
  3. Include the generated files in your project’s header file: 
    <link type="text/css" rel="stylesheet" href="./public/libraries/all.min.css" media="all" />
<script type="text/javascript" src="./public/libraries/all.min.js"></script>

Using:

  • https://bower.io/#install-bower
  • http://andy-carter.com/blog/a-beginners-guide-to-package-manager-bower-and-using-gulp-to-manage-components
  • http://clubmate.fi/bower-and-gulp-match-made-in-heaven-also/#header