Book Image

Mastering Grunt

By : Daniel Li
Book Image

Mastering Grunt

By: Daniel Li

Overview of this book

<p>Grunt.js continues to excel as the build automation tool of choice. Along with its support for many third-party technologies, Grunt is packaged with a clean API for defining tasks. This powerful tool can streamline your workflow by automating the preparation tasks for production, such as compression, compilation, obfuscation, testing, and even pushing your web application live. This book will teach you how to master build automation and testing with Grunt. You will have the opportunity to utilize the latest and in-demand web tools, such as Git, Jade, CoffeeScript, Sass, and the Mocha testing engine, across several exciting projects by combining Grunt with them. You will also learn to create a project – a simple Bulletin Board System (BBS), which will explain the use of Grunt alongside the Mocha testing library to automate testing throughout the build process.</p> <p>Mastering Grunt will demonstrate how to leverage Grunt with other technologies to become an expert in build automation, teaching you the best practices for modern web development along the way.</p>

Related Content you might be interested in

Current Title:

Small book image
Mastering Grunt
Daniel Li
Apr, 2014 | 110 pages
No titles found
Table of Contents (12 chapters)
Mastering Grunt
Mastering Grunt
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started
Getting Started
Introducing Grunt
Introducing Git
Introducing GitHub
Introducing npm
Introducing Bower
Installing Grunt
Deploying a Hello World page
Summary
2
Developing a Blog with Jade and Sass
Developing a Blog with Jade and Sass
A brief summary of Jade
A brief summary of Sass
Concatenation and minification
Building the blog
Summary
3
Making an Employee Management System
Making an Employee Management System
A brief summary of CoffeeScript
Building the employee management system
Summary
4
Final Project – Simple Bulletin Board System
Final Project – Simple Bulletin Board System
Installing the required Grunt plugins
Developing a simple Bulletin Board System (BBS)
Summary
5
Best Practices for Modern Web Applications
Best Practices for Modern Web Applications
The importance of search engine optimization
Form validation in the modern web world
Designing interfaces for the mobile generation
Summary
Index
Index

Developing a simple Bulletin Board System (BBS)

This section will investigate the development of a simple employee management system. Perform the following steps:

  1. The first thing you should do is move to your Sass file directory, located in src/styles/sass.

  2. Within this directory, you will find main.scss. Populate your main.scss file with the following imports:

    @import 'bootstrap-sass/lib/bootstrap.scss';
@import '_bbs.scss';

    Note that when you save main.scss, the terminal running the Grunt watch task populates with an update regarding the compilation of main.css, which can be found in src/styles.

  3. Following this, open _bbs.scss and add the following lines of code:

    #board {
  .post {
    border-radius: 0;
    padding-bottom: 32px;
  }

  .reply {
    padding: 0 19px 0 40px;
  }
}

    This will add the padding changes required to create an appealing bulletin board. Note that Sass's use of embedded CSS attributes allows the previous code block to be compiled to the following:

    #board .post {
  border-radius...
Previous Section
End of Section 3
Next Section