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 👇

Free HTML landing page templates for startups - Cruip

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 this v10.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 this 6.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👇

Building a landing page with Cruip - Changing the color palette

Enjoyed this post? Get the next articles, tutorials and templates directly in your inbox 👉 Subscribe