nwt-gulpfile
An opinionated frontend workflow based on jonnitto/gulpfile.js
Last updated 2 years ago by hlubek .
MIT · Original npm · Tarball · package.json
$ cnpm install nwt-gulpfile 
SYNC missed versions from official npm registry.

gulpfile.js

gulpfile.js is a delicious blend of tasks and build tools poured into Gulp to form a full-featured modern asset pipeline. You can easily be integrated to the development environment and site or app structure.

Usage

Make sure Node installed. I recommend using NVM to manage versions.

Install Dependencies

If you use this library the first time, you need to be shure all global dependencies are installed correctly:

# Install Yarn
brew update
brew install yarn
# Uninstall Gulp
npm uninstall --global gulp gulp-cli
# Install ScssLint
gem install scss_lint
# Install some plugins globally
npm install --global gulp-cli eslint

If the global dependencies are installed, you can install the rest with yarn.

Run Gulp

If you have gulp installed globally, you can simple run gulp, optional with some flags. With gulp -T you can print out all the options. If there's a global gulp in a different version, you have to use this commands:

Command Watcher Behaviour
yarn start x Generates all Assets, Javascript and CSS files
yarn run tasks Show all available tasks
yarn run beautify x Beautify and dont't compress files
yarn run debug x Files dont't get compressed and sourcemaps get genereated
yarn run maps x Write sourcemaps
yarn run build Runs the build process for production
yarn run css Render CSS Files
yarn run scss Render _all.scss and _allsub.scss Files
yarn run js Render Javascript Files
yarn run images Optimize images and overrite them in the source folder

Overview

Features Tools Used
CSS Sass (Libsass via node-sass) and PostCSS
Javascript Rollup JS with Bublé or Babel
Images Compression with imagemin. Run width gulp optimizeImages. Overwrites files in the resource folder.
Icons Auto-generated SVG Sprites and/or Icon Fonts
Lint ScssLint and ESLint included

You can configure the behaviour with the gulp.json in the root folder. To turn of a certain task, for example, just do it like this:

{
	"tasks": {
		"js": false
	}
}

Take a look into config.json the figure out which options are available. The script loads also the informations (description, author and homepage entry) from composer.json

CSS

SCSS

These small helpers can make your developer life much easier. These files get filled automatically by the gulp task scss

Filename Description
_all.scss Every file from the same directory get an @import statement. Files with beginning underscore (_) get ignored.
_allsub.scss Every file from sub directories an @import statement. Files and folders with beginning underscore (_) get ignored.

PostCSS

Following plugins are included:

Plugin Description
postcss-rtl PostCSS plugin for RTL-optimizations. Turned off by default
postcss-assets PostCSS plugin to manage assets
postcss-magic-animations Plugin that adds @keyframes from Magic Animations
postcss-vmax Use vmax units in Edge and Internet Explorer
postcss-short Short creates and extends shorthand properties in CSS
postcss-center PostCSS plugin to center elements
postcss-grid-kiss A PostCSS plugin to keep CSS grids stupidly simple
rucksack-css A little bag of CSS superpowers
postcss-flexbox Flexbox layouts made easy with PostCSS
pleeease-filters Convert CSS shorthand filters to SVG ones
postcss-selector-matches PostCSS plugin to transform :matches() W3C CSS pseudo class to more compatible CSS selectors
postcss-selector-not PostCSS plugin to transform :not() W3C CSS leve 4 pseudo class to :not() CSS level 3 selectors
postcss-pseudoelements PostCSS plugin to add single-colon CSS 2.1 syntax pseudo selectors (i.e. :before)
postcss-quantity-queries PostCSS plugin enabling quantity-queries
postcss-fixes PostCSS plugin to fix known Browser Bugs.
css-mqpacker Pack same CSS media query rules into one media query rule.
postcss-round-subpixels Plugin that rounds sub-pixel (eg: 12.87378px) values to the nearest full pixel.
postcss-reporter Log PostCSS messages in the console
postcss-pxtorem A plugin for PostCSS that generates rem units from pixel units.
cssnano Minify & autoprefix final css files

Plugins for Editors

Atom

Package Command
ScssLint apm install linter-scss-lint
ESLint apm install linter-eslint
Fusion apm install language-typoscript2

PhpStorm and WebStorm

License

Licensed under MIT, see LICENSE

Current Tags

  • 1.0.6                                ...           latest (2 years ago)

6 Versions

  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 6
Dependencies (65)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |