orlovmax / gulp-workflow

Gulp-based build tool with Pug, Sass, Rollup, PostCSS, BrowserSync

Gulp Workflow

Gulp-based build tool with Pug, Sass, Rollup, PostCSS, BrowserSync

Contents

• Requirements
• How To Start
• Folder And File Structure
  • Reserved Folders
• Configuration
• Tasks
  • Cleanup
  • Development
  • Production
  • Demonstration
• Inactive Tasks
• License

Requirements

• Node.js v16 or later
• Gulp v4 or later

How To Start

• Install Node.js >=16
• Install gulp-cli globally npm install --global gulp-cli
• Download this repo using git git clone https://github.com/orlovmax/gulp-workflow.git
• Go to downloaded folder cd gulp-workflow
• Install dependencies from package.json by running: npm install
• Start development by running npm start or gulp
• See Tasks and Configuration for more details

If you haven't used Gulp before, be sure to check out the Gulp - Getting Started.

Folder And File Structure

./
├── .editorconfig
├── .gitignore
├── gulpfile.js
├── package.json
├── README.md
├── LICENSE.md
|
├── gulp/                                      * gulp tasks
|   ├── _config.js                             * tasks config
|   └── task.js
|
├── src/                                       * site source
|   ├── pug/                                   * pug templates
|   |   ├── blocks/                            * blocks
|   │   |   └── block.pug
|   │   ├── helpers/                           * helper mixins
|   │   ├── vendor/                            * third-party code
|   │   ├── layouts/                           * page layouts
|   │   ├── pages/                             * page templates
|   │   └── config.json                        * site config
|   │
|   ├── sass/                                  * sass stylesheets
|   |   ├── blocks/                            * blocks
|   │   |   └── block.sass
|   │   ├── helpers/                           * mixins and vars
|   │   ├── vendor/                            * third-party code
|   │   ├── custom.sass
|   │   ├── noscript.sass
|   │   └── screen.sass
|   │
│   ├── js/                                    * scripts
|   |   ├── vendor/                            * third-party code
|   |   ├── modules/                           * modules
|   │   ├── head.js                            * head scripts
|   │   └── body.js                            * body scripts
|   │
│   ├── fonts/                                 * font sources
|   │
│   ├── images/                                * image sources
|   │
│   └── helpers/                               * helper files
│       └── favicon.ico
|
├── build/                                     * site build
│   ├── index.html
│   ├── page.html
│   └── static/                                * static assets
│       ├── css/                               * compiled stylesheets with sourcemaps
│       ├── js/                                * bundled scripts
│       ├── fonts/                             * webfonts
│       └── images/                            * images
│
└── dist/                                      * site distribution (Ignored by GIT)
    ├── index.html
    ├── page.html
    └── static/                                * static assets
        ├── css/                               * minified compiled stylesheets
        ├── js/                                * minified bundled scripts
        ├── fonts/                             * webfonts
        └── images/                            * images

Reserved Folders

html, css, stylus, videos folder names in src are reserved by preconfigured inactive tasks, see Inactive Tasks.

Configuration

• .editorconfig file at the root of the project describes indentation style, trailing whitespaces etc. See EditorConfig site for more details.
• src/pug/config.json contains data for pug templates: site settings, meta information, links to css / js files or external fonts.

Tasks

Cleanup

npm run cleanup or gulp cleanup

• Removes .gitkeep placeholders from work directories.

Development

npm start or npm run dev or gulp dev

• Compiles pug templates
• Compiles sass stylesheets, combines media queries, adds vendor prefixes, generates sourcemaps
• Bundles scripts
• Copies fonts
• Copies images
• Copies helpers
• Runs BrowserSync static server with live reload
• Watches for changes and run dev tasks

Production

npm run prod or gulp prod

• Empties dist folder
• Compiles pug templates, minifies markup
• Compiles sass stylesheets, combines media queries, adds vendor prefixes, minifies stylesheets
• Bundles scripts, minifies scripts
• Copies fonts
• Copies images
• Copies helpers
• Runs BrowserSync static server

Demonstration

npm run demo or gulp demo \

• Runs static server.

Inactive Tasks

Preconfigured tasks but disabled in current version (commented-out and not imported), see gulpfile.js and watch.js.

html (html.js)
Dev: copies html markup
Prod: copies and minifies html markup
How To Activate:

• uncomment import { htmlDev, htmlProd } from './gulp/html.js'; section in gulpfile.js
• add htmlDev to dev and htmlProd to prod series in gulpfile.js
• uncomment import { htmlDevChanged } from './html.js'; and Watch HTML sections in ./gulp/watch.js
• create html folder in src

  ./
  └── src/
      └── html/                                  * html markup
          └── file.html
  

css (css.js)
Dev: copies css stylesheets, inlines imports, combines media queries, adds vendor prefixes
Prod: copies css stylesheets, inlines imports, combines media queries, adds vendor prefixes, minifies stylesheets
How To Activate:

• uncomment import { cssDev, cssProd } from './gulp/css.js'; section in gulpfile.js
• add cssDev to dev and cssProd to prod series in gulpfile.js
• uncomment import { cssDev } from './css.js'; and Watch css sections in ./gulp/watch.js
• create css folder in src

  ./
  └── src/
      └── css/                                   * css stylsheets
          ├── blocks/
          |   └── block.css
          ├── helpers/
          ├── vendor/
          ├── custom.css
          ├── noscript.css
          └── screen.css
  

stylus (stylus.js)
Dev: compiles stylus stylesheets, combines media queries, adds vendor prefixes, generates sourcemaps
Prod: compiles stylus stylesheets, combines media queries, adds vendor prefixes, minifies stylesheets
How To Activate:

• uncomment import { stylusDev, stylusProd } from './gulp/stylus.js'; section in gulpfile.js
• add stylusDev to dev and stylusProd to prod series in gulpfile.js
• uncomment import { stylusDev } from './stylus.js'; and Watch stylus sections in ./gulp/watch.js
• create stylus folder in src

./
└── src/
    └── stylus/                                * stylus stylesheets
        ├── blocks/
        |   └── block.styl
        ├── helpers/
        ├── vendor/
        ├── custom.styl
        ├── noscript.styl
        └── screen.styl

videos (videos.js)
Dev / Prod: copies videos
How To Activate:

• uncomment import { videosDev, videosProd } from './gulp/videos.js'; section in gulpfile.js
• add videosDev to dev and videosProd to prod series in gulpfile.js
• uncomment import { videosDevChanged } from './videos.js'; and Watch videos sections in ./gulp/watch.js
• create videos folder in src

./
└── src/
    └── videos/                                * video sources

License

MIT

gulp-workflow's Issues

Tasks review and sync with Gulp

Basic markup and styles

Put basic structure and content like "coming soon..." or something like this

Browser-sync usage

In some case, it might be easier to use browser-sync module instead of heavy standalone server.

Update tasks description

Use this description to update https://github.com/synteagle/synt-general-template

Update gulp branch

Update Gulp scaffold to the state of Grunt boilerplate https://github.com/orlovmax/front-end-scaffold/tree/grunt_v1.3.8

CoffeeScript support

Add coffee task and modify folder structure for further middleman experiments with Sass, Jade, Coffee stack

Move back head-meta block to the base layout

And define title, description, keywords and meta image as variables. Head-content should be used for page-specific source, like styles or scripts

Reorganize tags

Do something with those tags. They should be related to appropriate branches

Gulp-sass error handling while watch tusk running

Use this .on('error', sass.logError) instead of plumber plugin to handle sass errors

Grunt webfont generator

Gulp modify paths (dynamic) think about load-config

Data config.json for jade workflow

Gulp scaffold bower support

Use gulp flatten task as "bower-copy" and bower-main as "bower-concat" tasks in grunt.

Generate hash file names for caching

Gulp scaffold fonts task

Fix bug in fonts copy task - it will copy not only fonts, but also txt, config.json etc. Need some filter for this

Think about Travis or somthing like this

npm scripts experiment

Think about using scripts for common tasks, like described here
Additional resources:

• https://css-tricks.com/why-npm-scripts/
• https://github.com/damonbauer/npm-build-boilerplate/blob/master/package.json

Add intro page, update browser sync for specified files

Grunt-gulp sprites task

Add grid

Add simple grid as additional elements

html5shiv and respond.js

Add these libs to basic markup. Use cdn, but create some hook in bower.json for local copy

Modify preprocess task

Modify preprocess task for using context instead of echo conditions. For this project and for grunt-boilerplate

Gulp scaffold uglify task invalid syntax!

npm instead of bower?

CSSComb for sass/stylus files

Browserify usage

Take a look on browserify and its grunt implementation. Grunt-rowserify vs grunt-concat + Bower

Transform repository to the playground

This scaffold should become playground an links stable versons will be moved to Synteagle's repos. Put related links in README

Add typographic rhythm

Helpers should include updated version of typogr mixin with rem options

Branches for WPtheme dev workflow

duplicate or replace copy task with grunt-sync task

I've used it in one project and it looks pretty fine, even with remove option

Gulp scaffold add replacing between ie.js and ie.min.js using build:remove

Include variables to the custom stylesheet. Exclude media queries section

• Variables in custom stylesheet - it's pretty handy to start dev from one file and then move parts to blocks files.
• Media queries should be defined within specific element. In final build they will be merged in a general media query.

Path variables, prettify

Use variables for task paths, prettify Gruntfile.js

Csscomb rules sorting

Build tasks improvement

Target build tasks to files in build directory with rewriting instead of processing them from dev

Update readme

Drop a few lines about .editorconfig

Gulp scaffold: add run sequence for tasks

Ex. Concatenate and copy files to other folder. For now Gulp is copying files while concatenating them and as a result we have a bunch of original files without concatenated file.

Update styleguides, add default settings to variables

Yeoman generator

Separate assets by techs with their own tasks

That should be the one of the last version of scaffold before BEM structured scaffold

Think about ie.css

Some projects need some fixes for old ie browsers

Custom.css option

Just thought that customm.css might be a good option for current scaffold. It has sence when someone want to change style of some element without changing original stylesheets. ( For some hacks or some workarounds, lol)

Modify .htaccess cache rules

Add .hataccess rules for caching css, js etc > 1month. Now there is a cache busting option so it seems to be possible

Sass, less recursive compile

Recursive compiling sass, less files in cwdwith subfolders, but not in components folder

Block oriented structure

In separate branch create BEM oriented structure instead of current tech-oriented structure.. It means that each block will be presented as folder that contain block realization in markup, styles and js.

Use _mixins lib instead of _elements, add _ignition to devtools folder

Gulp scaffold stylus and structure changes

Modify structure and add stylus support for gulp scaffold. Also need someting for getting deal with bower

Styles structure upd

Current issue refers to #12
The point is that styles file structure should be similar to templates, except creating layouts. Styles are totally reusable - presented as independent blocks, even layout blocks.
The structure should look like this:

• styles
  • screen.sass
  • components folder // Independent components and/or blocks
    • general folder // Common used styles, related to curent project
      • reset.sass
      • fonts.sass
    • block-name.sass
  • helpers folder // Third-party independent components and libs
    • mixin.sass
    • variables.sass

use gulp-sass instead of ruby-sass

Issue with iconfonts was solved using this updated trick https://gist.github.com/orlovmax/d4642c105a3034d0988a

screen_noscript.css boilerplate

Add some boilerplate content to screen_noscript styles. It's causes warning in csso task that file is empty