Building a landing page with Cruip — Getting started with NPM Scripts
This is the first part of a series of step-by-step tutorials where we will walk you through every aspect of customizing a Cruip landing page template from the ground up.
Didn’t you know about Cruip? Check it out 👇
The folder structure
Let’s suppose you’ve just downloaded Laurel but you have no idea where to start.
That can be pretty understandable at the beginning, so let’s start by having a look at the folder structure👇
- src/ (stands for “source”) includes all the assets to be compiled (Sass files, non-linted JS files, and non-optimised images).
- dist/ (stands for “distribution”) includes production files only (for example, the stylesheet generated from Sass files, linted JS files, optimized images etc..). You should never work on those files as they are generated by NPM scripts.
We’re noticing that some users, in order to bypass NPM scripts, tend to get their hands dirty directly into the dist folder. That would be ok if you’re pushing just some light changes, but if it isn’t the case, this is not the right way to go.
Any kind of change should be made inside the src
folder. Precisely, every time you make modifications to the files inside that folder, our scripts process them again and output the files for the production site into the dist
folder. It sounds cool, does it? 😎
Getting started with NPM Scripts
Nowadays every frontend developer uses a build tool or NPM as a build tool to get rid of repetitive tasks (e.g. Sass compiling, minifying, JS linting, etc) and become more productive.
I managed to use Grunt before but, IMO, when you go with NPM scripts you will never look back. NPM scripts are becoming more popular than any other build tool at the time of writing; and the reason is simple: They are versatile, powerful and ridiculously easy to set up.
Basically, that’s why we decided to go with them for compiling our templates.
Install Node.js and NPM
NPM scripts require that Node.js & NPM are both installed on your machine.
- Test Node.js — To see if Node is correctly installed, open the Terminal, Windows Command Prompt or a similar command line tool, and type
node-v
. It prints a version number, and you should see something like thisv10.4.1
.
If Node is not installed, you can choose your OS and installation method from this page and follow the instructions.
- Test NPM — Type
npm-v
in Terminal. It prints an NPM’s version number and should see something like this6.4.1
.
If NPM is not installed, follow the documentation at this page.
Provide a package.json file
NPM requires a package.json
file. This file lists all the packages your project depends on, and it specifies package versions your project can use via semantic versioning rules. That makes your build reproducible and easier to share with other developers (Ref: https://docs.npmjs.com/creating-a-package-json-file).
Inside the template folder, you can see a package-sample.json
file. You just need to rename this file with package.json
and then customize it later.
Install dependencies
Now open the Terminal and use the command line to navigate the root directory of your template (cd /path/to/laurel
). Tip: On OSX you can type cd and drag & drop the laurel folder into the Terminal.
Type npm install
to install all of the dependencies into your project (note, it may take a while 😉).
You’re ready to go!
Run any task by typing npm run task
(where for task “task” we mean the name of the task in the “scripts” object). The most useful task for rapid development is npm run watch
. It starts a new server, open up a browser and watch for any SCSS or JS changes in the src
directory. Once it compiles those changes, the browser will automatically inject the changed files!
Anatomy of the package.json file
Our package.json file has been adapted from Damon Bauer’s npm-build-boilerplate. You don’t need to change anything inside the document, and I am just explaining how to run a specific script.
The document starts with some generic fields (i.e. name
, version
, description
, etc) before listing thescripts
. Let’s have a look 👇
Any listed script can be executed in the Terminal typing npm run
and followed by the name of the script. So, for example, you can remove the whole dist
folder typing npm run clean
.
Scripts included in our templates handle a bunch of main tasks:
CSS processing
npm run lint-scss
catches errors, applies limits and enforces stylistic conventions (via stylelint — settings are declared in the .stylelintrc file)npm run scss
compiles Sass to CSS (via node-sass)npm run autoprefixer
adds vendor prefixes to CSS rules (via Autoprefixer)
JS processing
npm run lint
identifies and reports on patterns found in ECMAScript/JavaScript code (via ESLint — settings are declared in the .eslintrc file)npm run uglify
parses, compresses and beautifies the JS code (via uglify-es)
Minifying images
npm run imagemin
optimizes images reducing the files size (via imagemin-cli)
Keep multiple browsers and devices in sync
npm run serve
uses BrowserSync to ensure that every time you change your code and save, the page is auto-reloaded. That makes web development definitely faster.
Chained scripts
Tasks listed above can be nested and chained into new scripts, and be sequentially invoked. For example, you can use npm run build:css
to execute npm run lint-scss
, npm run scss
and npm run autoprefixer
in one fell swoop. Yeah, that’s cool!
TL;DR
Use the npm run watch
command when you’re in the development stage: it listens for files change and ensure that CSS compiling, JS linting, images minification and browser sync occur when needed.
Use npm run build
when you are done with the development and you are ready to wrap up the production site.
Hungry for more? Take a look at the next tutorial below👇