Add a Gulp task to create the zip (#374)

This commit is contained in:
Yoran Brondsema 2017-09-18 18:37:00 +02:00 committed by John O'Nolan
parent 73a1ab52da
commit d34ff1d32b
4 changed files with 27 additions and 5 deletions

3
.gitignore vendored
View file

@ -13,9 +13,12 @@ results
npm-debug.log npm-debug.log
node_modules node_modules
package-lock.json
.idea/* .idea/*
*.iml *.iml
projectFilesBackup projectFilesBackup
.DS_Store .DS_Store
dist/

View file

@ -34,12 +34,18 @@ One really neat trick is that you can also create custom one-off templates just
Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node and Gulp installed globally. After that, from the theme's root directory: Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node and Gulp installed globally. After that, from the theme's root directory:
`$ npm install` ```bash
$ npm install
`$ gulp` $ gulp
```
Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically. Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
```bash
$ gulp zip
```
# PostCSS Features Used # PostCSS Features Used

View file

@ -6,6 +6,7 @@ var livereload = require('gulp-livereload');
var nodemon = require('gulp-nodemon'); var nodemon = require('gulp-nodemon');
var postcss = require('gulp-postcss'); var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps'); var sourcemaps = require('gulp-sourcemaps');
var zip = require('gulp-zip');
// postcss plugins // postcss plugins
var autoprefixer = require('autoprefixer'); var autoprefixer = require('autoprefixer');
@ -36,7 +37,8 @@ gulp.task('css', function () {
autoprefixer({browsers: ['last 2 versions']}), autoprefixer({browsers: ['last 2 versions']}),
cssnano() cssnano()
]; ];
gulp.src('assets/css/*.css')
return gulp.src('assets/css/*.css')
.on('error', swallowError) .on('error', swallowError)
.pipe(sourcemaps.init()) .pipe(sourcemaps.init())
.pipe(postcss(processors)) .pipe(postcss(processors))
@ -49,6 +51,16 @@ gulp.task('watch', function () {
gulp.watch('assets/css/**', ['css']); gulp.watch('assets/css/**', ['css']);
}); });
gulp.task('zip', ['css'], function() {
var targetDir = 'dist/';
var themeName = require('./package.json').name;
var filename = themeName + '.zip';
return gulp.src(['**', '!node_modules', '!node_modules/**'])
.pipe(zip(filename))
.pipe(gulp.dest(targetDir));
});
gulp.task('default', ['build'], function () { gulp.task('default', ['build'], function () {
gulp.start('watch'); gulp.start('watch');
}); });

View file

@ -43,6 +43,7 @@
"gulp-sourcemaps": "1.6.0", "gulp-sourcemaps": "1.6.0",
"gulp-util": "3.0.7", "gulp-util": "3.0.7",
"gulp-watch": "4.3.8", "gulp-watch": "4.3.8",
"gulp-zip": "4.0.0",
"postcss-color-function": "2.0.1", "postcss-color-function": "2.0.1",
"postcss-custom-properties": "5.0.1", "postcss-custom-properties": "5.0.1",
"postcss-easy-import": "1.0.1" "postcss-easy-import": "1.0.1"