Skip to content

Latest commit

 

History

History
297 lines (188 loc) · 9.73 KB

README.md

File metadata and controls

297 lines (188 loc) · 9.73 KB
Raw

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' } };