From d34ff1d32b27ea4bacb0147a1159db06a04456ba Mon Sep 17 00:00:00 2001 From: Yoran Brondsema Date: Mon, 18 Sep 2017 18:37:00 +0200 Subject: [PATCH] Add a Gulp task to create the zip (#374) --- .gitignore | 5 ++++- README.md | 12 +++++++++--- gulpfile.js | 14 +++++++++++++- package.json | 1 + 4 files changed, 27 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index e432184..c3ad11e 100644 --- a/.gitignore +++ b/.gitignore @@ -13,9 +13,12 @@ results npm-debug.log node_modules +package-lock.json .idea/* *.iml projectFilesBackup -.DS_Store \ No newline at end of file +.DS_Store + +dist/ diff --git a/README.md b/README.md index 9be22c5..0256faf 100644 --- a/README.md +++ b/README.md @@ -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: -`$ npm install` - -`$ gulp` +```bash +$ npm install +$ gulp +``` 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/.zip`, which you can then upload to your site. + +```bash +$ gulp zip +``` # PostCSS Features Used diff --git a/gulpfile.js b/gulpfile.js index 57bbede..a77b787 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -6,6 +6,7 @@ var livereload = require('gulp-livereload'); var nodemon = require('gulp-nodemon'); var postcss = require('gulp-postcss'); var sourcemaps = require('gulp-sourcemaps'); +var zip = require('gulp-zip'); // postcss plugins var autoprefixer = require('autoprefixer'); @@ -36,7 +37,8 @@ gulp.task('css', function () { autoprefixer({browsers: ['last 2 versions']}), cssnano() ]; - gulp.src('assets/css/*.css') + + return gulp.src('assets/css/*.css') .on('error', swallowError) .pipe(sourcemaps.init()) .pipe(postcss(processors)) @@ -49,6 +51,16 @@ gulp.task('watch', function () { 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.start('watch'); }); diff --git a/package.json b/package.json index 52be163..204785d 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "gulp-sourcemaps": "1.6.0", "gulp-util": "3.0.7", "gulp-watch": "4.3.8", + "gulp-zip": "4.0.0", "postcss-color-function": "2.0.1", "postcss-custom-properties": "5.0.1", "postcss-easy-import": "1.0.1"