a build tool? “In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it… a [build tool] can do most of that mundane work for you—and your team—with basically zero effort.” —gruntjs.com WHAT IS NPM?
= Node Package Manager It’s a “package ecosystem” for Node.js “Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine” npmjs.com nodejs.org/en WHAT IS NPM?
npmjs.com: "npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you're sharing." docs.npmjs.com/getting-started/what-is-npm WHAT IS NPM?
Because it’s already in your build process 2. It leaves you with fewer updating woes 3. It reduces dependency bloat 4. It’s more universally usable 5. Because it frees up your package options blog.keithcirkel.co.uk/why-we-should-stop-using-grunt medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm- scripts-3d6853dd22b8#.6mmefne7f www.pluralsight.com/courses/npm-build-tool-introduction Why use npm as a build tool? WHY USE NPM?
“To do the equivalent in Grunt, it'd take a Gruntfile of a few hundred lines, plus… around 10 extra dependencies. It's certainly subjective as to which version would be more readable…I personally think the npm scripts directive is easier to reason about (i.e. I can see all tasks and what they do, at a glance).” —Kieth Cirkel (@Keithamus) WHY USE NPM?
Gulp or Grunt, you must wait for plugin maintainers to provide updates, or fix it yourself. This delays your ability to utilize new versions of modern tools. In contrast, when I use npm scripts, I consume tools directly without an extra layer of abstraction.“ –Cory House (@housecor) medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm- scripts-3d6853dd22b8#.6mmefne7f WHY USE NPM?
sure npm and Node.js are up to date In command line 1. Run node -v to check Node.js 2. Run npm -v to check npm docs.npmjs.com/getting-started/installing-node STARTING A NEW NPM PROJECT
a New Project 1. Navigate to the folder you want npm to run in (in my case, Portals/_default/Skins/GoingAllNode) 2. In command line, run npm init or npm init --yes for a more barebones install STARTING A NEW NPM PROJECT
file keeps track of your project's dependencies, like whether you used a linter or a file compressor. That way when another dev pulls down your project, all they need to do is run npm install and they get the same set of packages that you have. docs.npmjs.com/getting-started/using-a-package.json THE PACKAGE.JSON FILE
SCRIPTS OBJECT “As part of npm's core, it has the npm run-script command (npm run for short). This command dives into your package.json and pulls out the scripts Object. The first argument passed to npm run refers to a property in the scripts object” —Kieth Cirkel (@Keithamus) blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool
run custom or npm run custom -s -s = silent. This keeps npm from logging info from the subtasks, makes the output simpler. docs.npmjs.com/misc/config#shorthands-and-other-cli-niceties THE SCRIPTS OBJECT
exit 1 = generic error • && = lets you run another command, if the one before it succeeds • ; = lets you run another command regardless of the success of the one before it THE SCRIPTS OBJECT
install package-name --save-dev • pwd = print working directory, aka the "you are here" command • i = short for install • --save-dev = add package to devDependencies RUNNING NPM MODULES
Commands 1. Look at the list in node_modules./bin or 2. Navigate to your project folder and run ls node_modules/.bin 3. ls = list directory contents RUNNING NPM MODULES
output = tell uglify where to write the compressed file and where to get the uncompressed file • compress = reduce file size by taking out spaces, comments, etc. • mangle = shorten variable names RUNNING NPM MODULES
dir = the output directory for the CSS file • use = define a postcss plugin to use • autoprefixer.browsers = tell autoprefixer which browsers to prefix for • final parameter = what CSS file to process npmjs.com/package/postcss-cli ADDING THE POSTCSS TASK
AND WATCHING Goals 1. Add some file watching functionality so I don’t need to manually run the tasks for every single change 2. Make the PostCSS and uglify tasks run all at once
AND WATCHING Goals 1. Add some file watching functionality so I don’t need to manually run the tasks for every single change 2. Make the PostCSS and uglify tasks run all at once
NODE: WHAT IS THE SHELL? “Simply put, the shell is a program that takes your commands from the keyboard and gives them to the operating system to perform.” “On most Linux systems a program called bash (which stands for Bourne Again Shell...) acts as the shell program.” —linuxcommand.org
IS POSTCSS postcss.org PostCSS is a build-your-own CSS processor that runs on JavaScript. It works off of lots of little plugins instead of using a monolithic codebase like Sass and Less do.
WHAT IS POSTCSS bigbitecreative.com/a-look-into-writing-future-css-with-postcss-cssnext/ twin.github.io/css-pre-vs-post-processing Post-processor Parse and process regular CSS Pre-processor Compile code that is not CSS (like an extension language) into browser-readable CSS
USE POSTCSS davidtheclark.com/excited-about-postcss “I think [Sass] offers too much — more than enough to become cleverly counterproductive… so if I include Sass at all, I must welcome into my work- home an API that is larger and more complex than I need or want.” —David Clark (@davidtheclark)
USE POSTCSS sitepoint.com/build-css-preprocessor-postcss ashleynolan.co.uk/blog/postcss-a-review • It’s modular. • Anyone can write plugins for it. No waiting on The Sass Devs for new features or fixes. • It complies really fast! • Tons of cool plugins at postcss.parts
PLUGINS 2. PostCSS Easy Import Lets you use the @import rule to pull multiple css files into one. Also has a Globbing property that lets you import whole folders at once. npmjs.com/package/postcss-easy-import
PLUGINS 6. PostCSS Mixins “A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.” –Sass guide sass-lang.com/guide npmjs.com/package/postcss-mixins
PLUGINS 6. PostCSS Mixins Every time you call a mixin, another block of code is written in your compiled CSS file. Mixins do NOT save you from outputting the same code multiple times, so be mindful of how you use them!
PLUGINS 7. PostCSS Extend Use extends. Extends are similar to mixins in the way that they make a block of code reusable, but how that code is written in the compiled CSS file is very different. npmjs.com/package/postcss-extend
PLUGINS “It is vital that you are forming that relationship around the right characteristics.” —Harry Roberts (@csswizardry) csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/ 7. PostCSS Extend: Mayhem
PLUGINS “The issue here is that I have forced a relationship between unrelated rules… I now have a very unusual source order in which specificity is jumbled up. I am distributing selectors across my codebase for purely circumstantial reasons.” —Harry Roberts (@csswizardry) csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/ 7. PostCSS Extend: Mayhem
SiteGround - Reliable hosting with speed, security, and support you can count on.
mocasalter
safie
maguroalternative
k1nakayama
cielo1985
tomodakengo
ufried
uhyo
kazumax55
ma2shita
ren8k
i35_267
shimastripe
tapps
chikuwait
caitiem20
inesmontani
skoyamalab
szymonslowik
geoffreycrofte
samtorres
chrisshort
garrettdimon
tammyeverts
aleyda
