Bare Bones
A decent starting point for building static websites with PHP.
If you have any questions about this build, issues setting up, or would like to suggest features, please submit an issue through the project's issue tracker.
The purpose
This setup handles monotonous tasks such as HTML validation, CSS vendor prefixing, image compression, minification and more. When developing a project with bare-bones
you will have 3 main directories in your project.
src
The src directory is where all code edits take place. This is where you will create new files, add assets like icons and images, and everything else you normally do when building a static website.build
The build is the result of running a build tool calledgulp
. After things like vendor prefixes, SASS compilation, HTML validation etc has all been done, all of the src files are stored inside ofbuild
and this is where you will point your server. Example: in XAMPP you'll likely have a path likelocalhost/<document_root>/<name_of_project>/build
wheredocument_root
is the path you configure for XAMPP, andname_of_project
is the name of your project - which will just bebare-bones
if you didn't specify a name when runninggit clone
.dist
Is the result of minifying all source files so that the file sizes are reduced for faster load times. In typical build systems, CSS and JS is often concatenated into a single file - in this setup, CSS is concatenated before being set to the build folder. The contents ofdist
is what gets uploaded to thepublic_html
directory on a live production server.
Recap
src
is where development takes place.build
is used for debugging purposes. It contains code that has been compiled, prefixed and potentially other processing. It's sometimes necessary to be able to view this code, and so thebuild
files are not minified, so that they can be read/debugged by a developer.dist
is the final stage in the workflow. These files are completely compressed and unreadable. No developer should ever set eyes on the contents within. It's for computers only ;)
Set up
Requirements
You will need the following installed on your local machine:
- Git: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
- Node: https://docs.npmjs.com/getting-started/installing-node
- npm (included with Node): update with
npm install npm -g
orsudo npm install npm -g
on Linux - gulp installed globally:
npm install -g gulp
tl;dr
On Node
git clone https://DanJFletcher@bitbucket.org/reddingdesigns/bare-bones.git <name-of-project>
cd bare-bones
npm install
gulp watch
- (For Node)
node index.js
Alternatively:nodemon index.js
Must install with:npm i -g nodemon
- View at
localhost:8080
- (For XAMPP)
Start server and visit your localhost at your document_root. If it's not set, it'll belocalhost/htdocs/path/to/project
Detailed Steps
- Open terminal and
cd
to where you wish to create the projects' directory. - Then run
git clone https://DanJFletcher@bitbucket.org/reddingdesigns/bare-bones.git
Optionally, you can change the name of the target directory by appending a custom name to the end of the command like this:git clone https://DanJFletcher@bitbucket.org/reddingdesigns/bare-bones.git my-project-name
cd my-project-name
- Install dependencies. This is why you need npm. It's included by default with Node. All you have to do is run
npm install
- Now run
npm start
. This will start up a node server athttp://localhost:8080
on your computer. Visit that URL to view the project. - In a separate terminal,
cd
into the project directory, and rungulp
. This will run your build tools, which currently includes onlyautoprefixer
so that you can write CSS without having to worry about vendor prefixes. You can configure browser support inside ofgulpfile.js
. See the Autoprefixer docs for configuration options. - Lastly make sure you have a spare terminal open in the project directory, so that you can run your normal git commands.
~ Happy coding :)