jekyll-npm-browsersync-postcss

jekyll-npm-browsersync-postcss

jekyll new migrated to npm scripts, browsersync, postcss, still builds on github

Demo Download

jekyll new migrated to npm scripts, browsersync and postcss with as few changes as possible.

Still builds on GitHub*, see

http://www.filtercake.com/jekyll-npm-browsersync-postcss/

* (via checking in compiled css)

how to use

  • fork

  • for username.github.io...

    • switch to master branch
    • _config/.jekyllrc.yml
      • url
      • baseurl

  • for other repos

    • keep working in gh-pages branch
    • _config/.jekyllrc.yml
      • url
      • baseurl

Why

  • use all the cool frontend-via-npm stuff
  • get better at using npm scripts
  • try out how far postcss can compile scss (pretty far)

Overview

  • use terminal apis of jekyll and postcss
  • do not use built in watchers but nodemon
  • serve with browsersync

tl;dr

  • install all the packages locally
  • executables are in node_modules/.bin/
  • make one-liners from those executables and save them as "scripts" in the package.json
  • wrap those tasks in watchers with nodemon
  • chain the watchers together in "npm start"

With node-sass, this would be seamless (will maybe bild that version too).

update: it is now jekyll-npm-nodesass-postcss-browsersync :D

For postcss the sass needed some refactoring:

  • // comments produce errors
  • fix imports: full filenames, don't use sass import dir
  • imports must come first, so variables needed to go into a partial (makes sense anyway)
  • interpolated variables in postcss-simple-vars have differing syntax :/...
  • ...but was not used that often and was able to refactor calculations to vanilla css calc()
  • font declaration shorthand broke
  • darken() and lighten() were missing

All in all pretty amazing how far it works :)

What follows is the raw log, not a real readme... blogpost is in the works

commanding with npm

  • npm init -f 31ceaae
  • npm start -> jekyll serve 9e3d1a0
  • get a grip on baseurl: jekyll serve --baseurl '' e5690e2

serve with browsersync

  • npm install browser-sync --save
  • Browsersync: Get started in 5 minutes
  • browser-sync start --server --files "css/*.css" --> browser-sync start --server --files "_site"
  • ./node_modules/.bin/browser-sync start --server "_site/" --files "_site"
    • url is wrong :/
  • jekyll serve also did watch and triggered compile on file changes
  • add node_modules/ to .gitignore

e93f473

watch and compile

watch, compile, serve

"jekyll_watch_compile_dev": "./node_modules/.bin/nodemon --ignore _site/ --ext html,md,yml --exec 'npm run jekyll_compile_dev'",
"browsersync_serve": "./node_modules/.bin/browser-sync start --server '_site' --files '_site'",
"start": "npm run jekyll_watch_compile_dev & browsersync_serve"

cleanup

[BS] Config file created bs-config.js
[BS] To use it, in the same directory run: browser-sync start --config bs-config.js

  • mv bs-config.js _config/.browsersyncrc.js

  • browser-sync start --config _config/.browsersyncrc.js

  • "browsersync_serve": "./node_modules/.bin/browser-sync start --server '_site' --files '_site'",

  • "browsersync_serve": "./node_modules/.bin/browser-sync start --config _config/.browsersyncrc.js",

  • Browsersync options: server

    • // Serve files from the app directory server: "app"

postcss

From Sass to PostCSS

npm install postcss postcss-cli autoprefixer postcss-import postcss-simple-vars postcss-nested postcss-sassy-mixins --save

  • basically works

    • // comments produce errors

    • fix imports: full filenames, don't use sass import dir

    • interpolated variables have differing syntax :/

    • font declaration

    • darken()

    • refactor calculation to vanilla css calc()

conf for github build

ln -s _config/.jekyllrc.yml _config.yml

automate

  • css is not build on gh-pages, so needs to be in ./css and checked in so it gets copied on jekyll build

  • after postcss, css/ needs to be copied into _site/

    "postcss_compile": "./node_modules/.bin/postcss --config _config/.postcssrc.json", "postcss_copy": "cp -r css/* _site/css/", "postcss_watch_compile_copy": "./node_modules/.bin/nodemon --ignore _site/ --ignore node_modules/ --ext scss --exec 'npm run postcss_compile && npm run postcss_copy'",

    "start": "npm run postcss_compile && npm run jekyll_compile_dev && npm run jekyll_watch_compile_dev & postcss_watch_compile_copy & npm run browsersync_serve"

add sass

The input can be either a single .scss or .sass, or a directory. If the input is a directory the --output flag must also be supplied.

./node_modules/.bin/node-sass --output-style expanded --source-comments --include-path _sass --follow css/main.scss css/main_roughmix.css

"sass_compile": "./node_modules/.bin/node-sass --output-style expanded --source-comments --include-path _sass --follow css/main.scss css/main_roughmix.postcss",
"sass_watch_compile": "./node_modules/.bin/nodemon --ignore _site/ --ignore node_modules/ --ext scss --exec 'npm run sass_compile'",

======================================== DEPRECATED

./node_modules/.bin/browser-sync start --server "_site/" --proxy '/jekyll-npm-browsersync-postcss/'

./node_modules/.bin/browser-sync start --proxy 'http://127.0.0.1:4000/jekyll-npm-browsersync-postcss/' --serveStatic '_site'

./node_modules/.bin/browser-sync start --proxy 'http://127.0.0.1:4000/jekyll-npm-browsersync-postcss/' --serveStatic '_site' --files '_site'

browser-sync start --proxy 'mylocal.dev' --serveStatic 'public'

As the Browsersync CLI docs tell us we can init a configuration file by doing ./node_modules/.bin/browser-sync init. (We need to prepend the local path because we didn't install browsersync globally, but only locally.)

That command should return something like

[BS] Config file created bs-config.js
[BS] To use it, in the same directory run: browser-sync start --config bs-config.js

Again we have to prepend the command with the local path though: ./node_modules/.bin/browser-sync start --config bs-config.js

$ browser-sync start --config 'conf/browser-sync.js'

module.exports = { server: { baseDir: '_site' }

};

module.exports = { debugInfo: true, files: [ '_site/.css', '_site/**/.html' ], ghostMode: { forms: true, links: true, scroll: true }, server: { baseDir: '_site' } };

minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog