What’s the difference between jekyll build -w and jekyll serve? I would like to use Jekyll with Webpack and React. And in this post it is recommended to use $ jekyll build -w with $ webpack -w. Is it possible to use $ webpack -w with jekyll serve? Or it’s better to use jekyll build -w?
You’d typically use jekyll serve while developing locally and jekyll build when you’re ready to build the site for production. serve fires up a local web server, whereas build just spits out the static site once.
Here’s how I use webpack with Jekyll on a Vue site:
While developing: webpack --mode development --watch & bundle exec jekyll serve --livereload
The --livereload is a convenience flag and simply refreshes the browser after you’ve made changes.
For production build: webpack --mode production && bundle exec jekyll build
For convenience I define these in my package.json and, for example, use npm run dev when developing locally. Here’s an example file:
Thank you very much for your reply! I have a couple more questions. Why do you have in the first case only one & and in the second case two &&? And another question, can I define these commands in a Rakefile? Or it’s better to do this in package.json?
&& essentially means “run command A, and when it finishes run command B”.
& simply runs the processes in the background.
Since the development commands contain the --watch flag, the processes never finish. Thus, if you tried to use && with the --watch flag, the second command would never be called as the first command never finishes.
Defining the commands in npm (hence package.json) is a personal preference. My Ruby-fu is weak, so I prefer to stick with Javascript-centric tools whenever possible.
Thank you very much for the explanation! Is there any way to define a commit message in package.json? For example, in my Rakefile I have:
desc "Push the site to GitHub"
# Usage: rake push "Commit message"
task :push do
message = ARGV.last
task message.to_sym do ; end
system "git add ."
system "git commit -am '#{message}'"
system "git push"
puts "Pushed latest commit to GitHub."
end