Add a Gulp task to create the zip (#374)
This commit is contained in:
parent
73a1ab52da
commit
d34ff1d32b
4 changed files with 27 additions and 5 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -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/
|
||||||
|
|
12
README.md
12
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:
|
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
|
||||||
|
|
||||||
|
|
14
gulpfile.js
14
gulpfile.js
|
@ -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');
|
||||||
});
|
});
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue