Phoenixdown provides a simple-but-fantasy-ish API for defining basic Gulp tasks for your (especially Laravel) web application.
However, instead of providing all new API style like Elixir, we just provide a simple functions to use will Gulp.
If you're eliminated, Elixir can't help you, but Phoenix Down can.
Add gulp-phoenixdown
as an dependency in devDependencies
of your package.json
file, then run npm install
.
Require gulp-phoenixdown
in your gulpfile.js
, then just "cast" some skills:
var gulp = require('gulp');
var cast = require('gulp-phoenixdown');
gulp.task('browserify', cast.browserify('./resources/assets/js/app.js').to('./public/js'));
gulp.task('less', cast.less('./resources/assets/less/app.less').to('./public/css'));
That's it! We just provide skills: the functions to create common tasks easily. However, if you want more tasks, you can just use Gulp directly.
- angularTemplateCache
- all
- browserSync
- browserify
- clean
- concat
- copy
- jshint
- less
- version
Make template cache for AngularJS, from src
to dest
.
gulp.task('template', cast.angularTemplateCache(src).to(dest));
Cast many skills at once.
gulp.task('copy', cast.all(
cast.copy(src1).to(dest1),
cast.copy(src2).to(dest2),
cast.copy(src3).to(dest3),
));
To start the server:
cast.browserSync.startProxy(server);
You may omit the server
argument, and it will try to use value from APP_URL
or APP_DOMAIN
of .env
file in the project.
To reload the server:
cast.browserSync.reload();
Bundle JavaScripts with Browserify.
Declaring the task:
gulp.task('browserify', cast.browserify(src).to(dest));
Or call in watch
task:
cast.browserify(src).to(dest).watch();
gulp.task('clean', cast.clean(src));
gulp.task('concat', cast.concat(src).to(dest));
gulp.task('copy', cast.copy(src).to(dest));
Lint JavaScript files with JSHint.
gulp.task('jshint', cast.jshint(src));
Compile LESS files from src
to css into dest
directory.
gulp.task('less', cast.less(src).to(dest));
gulp.task('version', cast.version(src).to(dest));
var gulp = require('gulp');
var cast = require('gulp-phoenixdown');
// Task Set
var build = ['browserify', 'template', 'less', 'copy'];
var postBuild = ['version'];
var develop = ['server', 'watch'];
// Usage
gulp.task('default', build.concat(postBuild));
gulp.task('develop', build.concat(postBuild).concat(develop));
// Build
gulp.task('browserify', cast.browserify('./resources/assets/js/app.js').to('public/js'));
gulp.task('template', cast.angularTemplateCache('./resources/assets/templates/**/*.html').to('public/js'));
gulp.task('less', cast.less('./resources/assets/less/app.less').to('public/css'));
gulp.task('copy', cast.copy('./node_modules/bootstrap/dist/fonts/**/*').to('public/fonts'));
gulp.task('version', build, cast.version([
'./public/js/app.js',
'./public/js/templates.js',
'./public/css/app.css',
]).to('public/build'));
// Develop
gulp.task('server', cast.browserSync.startProxy);
gulp.task('reload', build, cast.browserSync.reload);
gulp.task('watch', function() {
cast.browserify('./resources/assets/js/app.js').to('public/js').watch();
gulp.watch('./resources/assets/templates/**/*.html', ['reload']);
gulp.watch('./resources/assets/less/**/*.less', ['reload']);
gulp.watch('./public/js/app.js', ['reload']);
});