Instant style with node, the node package manager (npm), Gulp and Sass :: 2018-01-19 14:07:09

Trust me, you put this in place and it’s E-Z P-Z after that to create Sassified projects. All this is done inside a directory served by apache… on ubuntu zesty

  • create a directory to work in…
  • change into that directory…
// INSTALL:node, npm Gulp, Sass
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs

/** first time GULP use !!! **/
/**  the '-g' flag indicates GLOBAL!! **/
npm install --save -g gulp > npm2.log 2> npm2.err
/** global only on Gulp install... **/
/** then install modules locally from within the working directory **/
npm install --save-dev gulp > npm2.log 2> npm2.err
npm install --save-dev gulp-sass > npm2.log 2> npm2.err
/** use bash redirection '>', '2>' to create 2 logs: an install log and an error log **/

[[HELP FILE MANUAL]] https://docs.npmjs.com/all

    The following commands are optional and should be used:
  • if you want to check the status of node modules (add the ‘-g’ flag for global)
  • if you want to dynamically add/modify configuration of package.json file
  • if you want to save the module directive to the package.json file ( [–save-dev] flag  is for development )
  • if you get WARN messages after installing node packages & you want to update and or fix broken dependencies
npm ls /** show your module status locally -g for globally like a bash ls -a ha!! **/
npm set init.author.email "bill@speedwayfightclub.com" /** dynamically configure package.json **/
npm install [NO GLOBAL FLAG][--save-dev] /** puts the module in the json file **/]
npm update [module] /** fixes dependencies not satisfied (tagged with the 'WARN' notice **/ [NO GLOBAL FLAG][module]

Make an npm profile in your computer file system home directory. [[HELP FILE MANUAL]] https://docs.npmjs.com/files/package.json. It MUST be called .npm-init.js /** NOTE the preceding dot its part of the file name **/
Inside of it put something like this, and change the ALLINCAPS values to appropriate values for you, please, read the manual:

module.exports = {
"author":"AUTHOR",
"author.email":"EMAIL",
"name":"NAME",
"main":"JAVASCRIPT.js",
"version":"1.0.0",
"license":"Apache-2.0",
"scripts":{
"test":"echo \"Error\" && exit 1"
},
"keywords":["KEYWORD#1"],
"repository": {
"type": "git",
"url": "GIT HOME"
},
/** after running npm install --save-dev gulp && npm install --save-dev gulp-sass **/
"devDependencies": {
"gulp": "^3.9.1",
"gulp-sass": "^3.1.0"
}
/** ***************************** **/
}
/** now when you call init, it pulls this information into the package.json file!!! **/

In the directory your working create a file called README.md, The 1st line of this file will be pulled as the “description” field in your package.json file

CALL:

npm init
/** makes package.json **/

When editing package.json use “double quotes” NOT ‘single quotes’ json likes that…

The JSON standard requires double quotes and will not accept single quotes, nor will the parser. If you have a simple case with no escaped single quotes in your strings (which would normally be impossible, but this isn’t JSON), you can simple str.replace(/’/g, ‘”‘) and you should end up with valid JSON. —

This is how your file/folder structure will look like for our purposes

// demo folder/file structure: /////////////////////////
-index.html
-README.md
-package.json
-Gulpfile.js
----sass
--------style.scss
----css
--------style.css
//////////////////////////////////////////////////////
/** index.html is not needed for the purpose of this tutorial, unless your utilizing generated *.css file **/
/** populate index.html with classes and elements and ids and nest them appropriately **/
/** add sass commands to *.scss file that access exposed elements in index.html **/

Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “.sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Files in the indented syntax use the extension .sass. —

This is an example of a Gulpfile.js in this instance, it creates a ‘task’. [[HELP FILE MANUAL]] https://github.com/gulpjs/gulp/blob/master/docs/API.md

/** START FILE inside Gulpfile.js **/
var gulp = require('gulp');
var sass = require('gulp-sass');

/** create a gulp task, a hook, and a callback **/
gulp.task('style-task-1'/**HOOK**/, function() {
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
});
/** END FILE **/

Put this in your *.scss file (your Sass file, whatever you named it, star dot scss means any sass file with the ‘.scss’ file name extension.
[sass]
$version: “1.2.3”;
/* bill@speedwayfightclub.com version #{$version}. */
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
[/sass]

The css output, the result of all are endeavors… sweat pant….

/* bill@speedwayfightclub.com version 1.2.3. */
#main p {
color: #444444;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }

The html that you can use to complete the circle, and view the test…

<html>
<head><title>test sass</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="main">
<p>Div id tag 'main' with nested paragraph & nested element with class of <span class="redbox">'redbox'</span></p>
</div>
</body>
</html>

CALL:

/** from the command line **/
gulp style-task-1 /**HOOK**/
/** did you get a message 'Task '/**HOOK**/' is not in your gulpfile'? THEN QUIT 😉 **/

The end result, the benefits increase exponentialy as the amount of tags and CSS markup increase, this is the result:

[[HELP FILE MANUAL]] http://sass-lang.com/documentation/file.SASS_REFERENCE.html

enjoy!

« »