Pagepro Blog

Tooling

Creating AMP boilerplate with SASS, Gulp and BrowserSync

Posted on .

Creating AMP boilerplate with SASS, Gulp and BrowserSync

Introduction

Why you need another AMP Boilerplate?

Because you can find some 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 <chris@pagepro.pl> (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;
Files & folders

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
Chris Lojniewski

Chris Lojniewski

http://pagepro.co

There are no comments.
View Comments (0) ...
Navigation