Uncategorized

CakePHP3 and Gulp file

Leave a comment

Step 1. – Install Cakephp3 using

composer create-project --prefer-dist cakephp/app my_app_name

Step 2. – I’ve already installed npm on my machine…

Step 3. In cake’s folder src/Template/Pages/home.ctp we’ll add inside <head></head> tags this line:

<?php= $this->element('assets'); ?>

Step 3. Let’s create the assets.ctp file though…

In src/Template/Element/dev create assets.ctp file with this content

<?php
echo $this->Html->css('{{css}}');
echo $this->Html->script('{{main}}');
echo $this->fetch('css');
echo $this->fetch('script');
echo $this->fetch('meta');
echo $this->Html->meta('favicon.ico', '/favicon.ico', array('type' => 'icon'));
?>

This file is going to be used as a template when creating the src/Template/Element/assets.ctp – but this file will be created on the fly by gulp.

Step 4. In the ./ of our project create the gulpfile.js with this content:


var gulp = require('gulp'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
jshintStylish = require('jshint-stylish'),
concat = require('gulp-concat'),
less = require('gulp-less'),
minifyCSS = require('gulp-minify-css'),
replace = require('gulp-replace'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
rename = require('gulp-rename'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
typescript = require('gulp-typescript');

//Random number we'll use to append to JS and CSS files
var myLess = [
'webroot/css/main.less',
'webroot/css/variables.less',
'webroot/css/base.css'
];

var vendorScripts = [

];

var myScripts = [
"webroot/js/test.js",
"webroot/js/services.js",
"webroot/js/controllers/search.js",
"webroot/js/filters.js",
"webroot/js/directives.js",
"webroot/js/chartjs-directive.js",
"webroot/js/controllers/**/*.js",
];

var allScripts = vendorScripts.concat(myScripts);
var randNumber = Math.floor((Math.random() * 1000000) + 1);

//Minify JS files
gulp.task('scripts', function() {
return gulp.src(allScripts)
.pipe(uglify())
.pipe(concat('main-' + randNumber + '.min.js'))
.pipe(gulp.dest('webroot/js'));
});

gulp.task('legacyScripts', function() {
return gulp.src([
//"webroot/js/legacy/expenses.js",
])
.pipe(uglify({mangle: false}))
.pipe(concat('main.min.js'))
.pipe(gulp.dest('webroot/js/legacy'));
});

//Linting
gulp.task('scriptlint', function () {
return gulp.src(myScripts)
.pipe(jshint({
//camelcase: true,
forin: true,
freeze: true,
funcscope: true,
newcap: true,
nonbsp: true,
latedef: true,
unused: true,
maxcomplexity: 14
}))
.pipe(jshint.reporter(jshintStylish));
});

//Convert LESS to CSS and minify
gulp.task('less', function() {
return gulp.src('webroot/css/main.less')
.pipe(less())
.pipe(rename(function(path){
path.extname = '-' + randNumber + '.css';
}))
.pipe(minifyCSS())
.pipe(gulp.dest('webroot/css'))
// .pipe('bower_components/angular-chart.js/dist/angular-chart.css')
.pipe(browserSync.reload({stream:true}));
});

gulp.task('legacyLess', function() {
return gulp.src('webroot/js/legacy/legacy.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('webroot/css'))
.pipe(browserSync.reload({stream:true}));
});

gulp.task('bs-reload', function () {
browserSync.reload();
});

//Update base.ctp with random file name
gulp.task('filecache', function() {
return gulp.src(['src/Template/Element/dev/assets.ctp'])
.pipe(replace(/{{main}}/g, 'main-' + randNumber + '.min'))
.pipe(replace(/{{css}}/g, 'main-' + randNumber))
.pipe(gulp.dest('src/Template/Element/'));
});

gulp.task('browser-sync', function () {
browserSync({
proxy: 'internal.dev:8000',
});
});

gulp.task('startup', function() {
del(['webroot/js/main*']);
del(['webroot/css/main-*']);
gulp.watch(allScripts, ['scripts', 'scriptlint', 'filecache', 'bs-reload']);
gulp.watch(myLess, ['less', 'filecache']);
gulp.watch(['src/Template/**/*.ctp', '!src/Template/Element/dev/assets.ctp', '!Template/Element/assets.ctp'], ['bs-reload']);
});

gulp.task('default', ['startup', 'filecache', 'scripts', 'less', 'legacyScripts', 'legacyLess', 'browser-sync']);

Step 5. The file above assumes you have

  • webroot/js/test.js – is just for testing that it’s working..
  • webroot/css/main.less – content bellow:
@path: "";
@import "@{path}base.css";
@import "@{path}cake.css";

Now execute ‘gulp’ on CLI

 

 

Leave a comment