TABLE OF CONTENTS

AMP boilerplate with SASS, Gulp and BrowserSync

Chris Lojniewski
By Chris Lojniewski

Why you need another AMP Boilerplate?

AMP boilerplate can help you solve many problems when creating an AMP Project:

  • You have to write vanilla CSS
  • No support for preprocessors
  • No support for linking CSS from external files
  • There is no official SASS boilerplate for AMP

Step 1: initialize npm

The project will be based on npm so let’s initialise it:

npm init;

You need to answer basic questions to generate package.json file.

My result looks like this:

{
  "name": "amp-boilerplate",
  "version": "1.0.0",
  "description": "AMP boilerplate.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "amp",
    "boilerplate",
    "starter"
  ],
  "author": "Chris Lojniewski <[email protected]> (http://pagepro.pl)",
  "license": "MIT"
}

Step 2: build files and folders structure

Let’s start with creating new folder for your project:

mkdir amp-boilerplate;

Then change to the directory just created:

cd !$

Create folders for the project:

mkdir src;
mkdir src/sass src/html;
touch src/sass/main.scss src/html/index.html;
mkdir dist;

src – source files,

dist – destination files

Step III: install Gulp and dependencies

We are going to use Gulp, so we need to create Gulpfile.js:

touch Gulpfile.js

We are going to need some dependencies:

Installing Gulp:

npm install – save-dev gulp

“–save-dev” parameter is for adding Gulp as devDependency in package.json

Installing Gulp Sass:

npm i -D gulp-sass

As you can see we can just type “i” instead of install and -D instead of “–save-dev”

Installing BrowserSync:

npm install browser-sync – save-dev

Installing other dependencies:

npm i -D gulp-cssnano gulp-inject-string gulp-plumber

Step IV: create Gulp tasks

Import Gulp and Plumber:

var gulp = require('gulp');
var plumber = require('gulp-plumber');

Plumber will make sure if Gulp is not crashing when CSS compilation prints errors.

Create SASS compilation task:

var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');

gulp.task('sass', function () {
    gulp.src('./src/sass/*.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(cssnano())
        .pipe(gulp.dest('./dist'));
});

Create HTML generation task:

var fs = require("fs");
var inject = require('gulp-inject-string');
gulp.task('html', function () {
    var cssContent = fs.readFileSync("./dist/main.css", "utf8");
    gulp.src("./src/html/*.html")
        .pipe(inject.after('style amp-custom>', cssContent))
        .pipe(gulp.dest("./dist"))
        .pipe(reload({
            stream: true
    }));
});

Create BrowserSync serve task:

var browser = require('browser-sync');
var reload = browser.reload;
gulp.task('serve', function() {
    browser({
        port: 4500,
        open: false,
        ghostMode: false,
        server: {
            baseDir: './dist'
        }
    });
});

Create watch task:

gulp.task('watch', function() {
    gulp.watch("./src/sass/**", ['sass']);
    gulp.watch("./dist/*.css", ['html']);
    gulp.watch("./src/html/*.html", ['html']);
});

Create default task:

gulp.task('default', ['sass', 'html', 'watch', 'serve']);

Running the boilerplate

Just type in the console:

gulp;

What we’ve achieved?

  • SASS compilation
  • CSS minification and optimisation (csso)
  • Injecting CSS into HTML <style amp-custom>
  • Auto refresh on HTML/CSS change

What next?

If you want some help regarding AMP or any other front-end-related matter, just contact us.

Leave a Reply