webrouse/n-sandbox

Extended nette/sandbox with integrated gulp, es6, nittro, sass, browsersync, ...

n-sandbox

, _(*1)

This is an extended version of nette/sandbox focused on fast development with modern PHP and JS tools., _(*2)

Wiki explains how to use present technologies with Nette Framework., _(*3)

This sandbox is currently based on Nette 2.4 due to incompatibility of some extensions with Nette 3., _(*4)

Requirements

• PHP >= 7.1
• Composer
• Node.js >= 6.0

Quick start

Install the gulp command, _(*5)

sudo npm install --global gulp-cli

Create a new project using composer, _(*6)

composer create-project webrouse/n-sandbox path/to/install
cd path/to/install

Install JavaScript dependencies using npm, _(*7)

npm install

Run serve task and profit, _(*8)

gulp serve

Visit http://localhost:3000/checker to check minimal requirements, if some issues, install the missing extensions., _(*9)

Visit http://localhost:3000 in your browser to see the welcome page., _(*10)

The serve task: * includes default and watch tasks * checks coding standards for php, js and scss files * compiles js, scss files and other assets * runs the PHP built-in webserver on localhost:8000 using project php.ini * runs Browsersync server on localhost:3000 that proxy requests to the PHP server * watches for changes and then check + recompile assets, _(*11)

You can append --silent to suppress unnecessary output, _(*12)

gulp serve --silent

You can append --fix flag to automatically fix coding standards issues:, _(*13)

gulp --fix
gulp lint --fix
gulp serve --fix

To one-shot assets check and compilation run the default task:, _(*14)

gulp

For more information, see Tutorial or List of all tasks., _(*15)

What's inside?

• Gulp task runner
• Cache busting of all assets with gulp-rev and n-asset-macro
• Rollup + Babel compile next generation ES6 scripts to browser-compatible JavaScript
• EsLint with Airbnb JS rules check scripts coding standards
• UglifyEs compresses scripts in production mode
• Nittro client-side framework for Nette
• Sass compiles scss stylesheets to css
• SassLint + Airbnb CSS rules check styles coding standards
• Autoprefixer adds css vendor prefixes according to your browserslist config
• Cssnano compresses css in production mode
• Source maps
• Browsersync for synchronised development and testing in multiple browsers and devices
• ECS checks nette/coding-standard in PHP files
• Localization with server-side and client-side support, only used messages are extracted to JavaScript locales
• Menu component extension
• Monolog extension for simple logging to various targets
• Git hooks mapped to gulp tasks
• SVG icons

• Favicon and touch icons generation from SVG, _(*16)

  Documentation

  Wiki explains how to use present technologies and tools., _(*17)

  Contributing

  Any improvements to the code or documentation are welcome., _(*18)

  The goal is to create a skeleton that allows comfortable development without affecting the application speed., _(*19)

  Todo

  Create test for each Gulp task with shunit2., _(*20)

  License

  Nette: New BSD License or GPL 2.0 or 3.0, _(*21)