This package is designed as a quickstart environment for producing themes for LemonStand.
Step 1: Install gulp (assuming you already have nodejs installed):
$ npm i gulp
Step 2: Install gulp dependencies:
$ npm i -D gulp-util gulp-changed gulp-rimraf gulp-notify gulp-less gulp-ruby-sass@v0.5.0 gulp-jshint gulp-concat gulp-uglify gulp-rename gulp-zip
Step 3: Start watching your files (the default gulp task - see details below):
$ gulp
Step 4: Create your theme as normal in the src
directory - not forgetting to update the README.md
and theme.yaml
files.
Step 5: When ready you can then either upload your theme files using the LemonStand backend interface (you can use the handy $ gulp zip
task to create a zipped version of your theme. Or you use LemonSync (there is an included boilerplate lemonsync.cfg
file).
You can manipulate the gulpfile.js
file to suit your needs. Everything in there is simply a default.
$ gulp
By default this simply calls the watch task.
$ gulp watch
This default action watches changes in files within the src
directory and runs the min-styles and/or the min-scripts tasks.
$ gulp flush
This removes all distribution files from the appropriate dist
directories. Useful when you want to remove old files prior to a new build
.
$ gulp min-styles
This triggers min-styles-less by default. You can configure this to suit your needs. You will see that min-styles-sass is available simply by uncommenting.
$ gulp min-styles-less
Compiles and compresses the less files found in src/less/
and contatenates them into dist/theme/css/main.css
.
$ gulp min-styles-sass
Compiles and compresses the Sass files found in src/scss/
and contatenates them into dist/theme/css/main.css
. Listens for file .scss
file extensions by default.
$ gulp min-scripts
This triggers min-scripts-js by default. You can configure this to suit your needs.
$ gulp min-scripts-js
Compiles and compresses the JavaScript files found in src/js/
and contatenates them into dist/theme/js/main.min.js
.
$ gulp min-vendor-scripts-js
Compiles and compresses any 3rd party vendor JavaScript files found in src/js/vendors/
and contatenates them into dist/theme/js/vendors.min.js
.
$ gulp resources
This moves all resources into the dist directory.
$ gulp twig
This moves all twig files into the dist directory.
$ gulp build
When you want to compile everything into the dist folder, including fonts, images etc use this.
$ gulp zip
This task simply creates dist/theme.zip
containing the contents of the dist/theme
directory. This can then be uploaded via the LemonStand backend interface.
This is not an officially supported repository and has been prepared by me to simply make life a little easier. I may or may not have time to fix issues, but please do fork/hack/whatever with it. Maybe someone with time could spin a Grunt version?
Feel free to use this however you wish. Code released under the MIT license.