theme-mix v1.3.0
theme-mix
A modern development workflow based on Webpack and laravel-mix which compiles Sass, ES6 JavaScript, Vue files, handles production builds, watchers, multiple CSS themes and more. Created for FrontendMatter.com products.
Installation
npm install theme-mix cross-env -D
Create a
webpack.mix.js
file at the root of your project:
require('theme-mix')
Update
package.json
with the workflow:
"scripts": {
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
Workflow
Build
Development build:
npm run development
Production build (includes extra minification, optimizations and cleanup):
npm run production
Watch
Start a web server and automatically rebuild your changes as you make them:
npm run watch
Tasks
Run specific tasks
npm run development -- --env.run [html|js|sass|copy|clean]
CSS Themes
Build specific themes:
npm run development -- --env.run sass --env.theme [theme_name]
Options
Create a
theme-mix.yaml
file at the root of your project. These are the default configuration options, exceptcopy
which by default is an empty list.
runTasks:
clean: true
js: true
copy: true
sass: true
html: true
enableCssThemes: true
enableCssRTL: true
copyCwd: node_modules
copyDest: dist/assets/vendor
copy:
- bootstrap/dist/js/bootstrap.min.js
- jquery/dist/jquery.min.js
- tether/dist/js/tether.min.js
- dom-factory/dist/*
- material-design-icons-iconfont/dist/fonts/*.{eot,ttf,woff,woff2}: dist/assets/fonts/material-icons
clean:
- dist/**/*.html
- dist/assets/{css,fonts,js,vendor}
sassSrc: src/sass/*.scss
cssDest: dist/assets/css
jsSrc: src/js/**/**.{js,vue}
jsDest: dist/assets/js
htmlDest: dist/[path][name].html
htmllint: true,
laravelMixOptions:
processCssUrls: false
browserSync:
port: 3000
files:
- ./dist/**/*.{html,css,js}
server:
baseDir: ./dist
injectChanges: true
notify: false
ghostMode: false
logLevel: silent
proxy: null
HTML Validation
Java Development Kit > v8 required.
java -version
Start the vnu-jar server on localhost port 8888.
java -cp node_modules/vnu-jar/build/dist/vnu.jar nu.validator.servlet.Main 8888
Now you can build/watch HTML with W3C validation.
npm run development -- --env.run html
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago