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:
cd Code
composer create-project kenjis/codeigniter-composer-installer our_new_project
cd our_new_project
php bin/install.php translations 3.1.0
composer update
composer require kenjis/codeigniter-cli --dev
php vendor/kenjis/codeigniter-cli/install.php
- 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);
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:
cd Code
cd our_new_project
bower init
bower install bootstrap --save-dev
npm install --save-dev gulp
npm install --save-dev main-bower-files
npm install --save-dev gulp-uglify
npm install --save-dev gulp-minify
npm install --save-dev gulp-concat
npm install --save-dev gulp-filter
npm install --save-dev gulp-flatten
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:
gulp
- Please remember to run the gulp command after adding any new library;
- 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