generator-npm-wp-s-theme
v1.1.7
Published
Yeoman generator for a WordPress starter theme (using Underscores) with npm and other good stuff
Downloads
511
Maintainers
Readme
generator-npm-wp-s-theme
Yeoman generator for a WordPress starter theme (using Underscores) with npm and other good stuff. This will install the last version of _s
(Underscores) and optionally a npm package setup ready for development and production.
List of packages used:
for development theme:
autoprefixer, browser-sync, copyfiles, cssnano, jshint, make-dir-cli, node-sass, npm-run-all, onchange, postcss-cli, rimraf, uglify-js, wp-pot-cli, @ffflorian/jszip-cli.
for download and generation clean theme:
chalk, copy, del, download, lodash, path, walk, yeoman-generator, yosay, pretty-hrtime.
Installation
First, ensure that node.js & npm are both installed. If not, choose your OS and installation method from this page and follow the instructions.
Install required tools yo
:
npm install -g yo
Install generator-npm-wp-s-theme
:
npm install -g generator-npm-wp-s-theme
Run
If this a new project (without a package.json file), start by:
Create a new directory, and go into:
mkdir my-new-theme && cd $_
Run yo npm-wp-s-theme
, and fill the info:
yo npm-wp-s-theme
Next, enter your project information.
To install theme and start generator You must input Localhost address
, domain site
, theme name
and theme slug
.
Theme URI
, author
, author URI
, author Email
, description
and bug report
not required and are filled in at will.
Requests for adding files .gitignore
, .editorconfig
, .jshintignore
, .stylelintrc
and .npmrc
are better left by default, and if necessary, make settings in them after installation
Usage
You're ready to go! Run any task by typing npm run task
(where "task" is the name of the task in the "scripts"
object). The most useful task for rapid development is watch
. It will start a new server, open up a browser and watch for any SCSS, JS, PHP changes in the theme; once it compiles those changes, the browser will automatically reload page with injected the changeds!
List of main tasks
watch
npm run watch
Run the following tasks simultaneously: serve
, watch:css
, watch:js
& watch:images
. When a .scss, .js, .php or image file changes, the task will compile .scss and .js files, and the server will be notified of the change. Any browser connected to the server will then inject the new file.
build
npm run build
Copies all the files necessary for the project to the "dist" directory. There are files in the theme catalog and in the archive. Compiles SCSS to CSS & add vendor prefixes, updates the language file.
List of useful tasks (one time)
lang
npm run lang
Updates the theme language file.
__*__First run add all options(textdomains, author, email..).
css
npm run css
Compiles SCSS to CSS, add vendor prefixes & minify/compress.
* Minify files saving in "css" directory
uglify
npm run uglify
To parse/compress/minify/beautify JavaScript files to single files "app.min.js" in "dist/js/" directory.
Need help?
Feel free to create an issue, tweet me, or send me an email. I'd be glad to help where I can!
Versioning
Maintained under the Semantic Versioning guidelines.
License
MIT Copyright (c) 2017 [MNyorba]