AMP boilerplate with SASS, Gulp and BrowserSync

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.