Skip to content

Latest commit

 

History

History
102 lines (70 loc) · 1.82 KB

README.md

File metadata and controls

102 lines (70 loc) · 1.82 KB

gulp-mix

Another Gulp boilerplate, with html partials, and image optimization (WIP)

Tasks

#Init server
gulp dev

#Build project
gulp compile

#ZIP build folder
gulp zip:build

#ZIP all (except node_modules)
gulp zip:all

HTML Partials

Using gulp-che-partials to convert HTML partial tags like this:

<!-- index.html -->
<partial src="partials/header.html" myTitle="Hello World">My Content</partial>


<!-- partials/header.html -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{myTitle}}</title>

    <!-- Styles -->
    <link rel="stylesheet" href="css/style.css">
</head>

⇓ Turns into ⇓

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>

    <!-- Styles -->
    <link rel="stylesheet" href="css/style.css">
</head>

Scaffolding

/build // where the build ends up (configurable)

/src // main project files (configurable)
/src/vendor // copy of npm dependencies scripts
/src/partials // all partial templates
/src/assets // js, css, sass files

gulpfile.js // gulpfile setup
mix.config.js // gulp-mix configurations
readme.md // inception

Features

🎨 CSS

  • Convert .scss to css
  • Autoprefix css
  • Minify css

🌋 JS

  • Minify and concatenate JS files

🎳 HTML

  • Minify HTML
  • Cache Bust
  • HTML Partials
  • Browser Sync server
  • Live Reload .css changes

Other preconfigurations

  • Base HTML header, body and footer setup
  • HTML and CSS to keep the footer at the bottom
  • JS and CSS fix to 100vh on mobile browsers
  • SASS placeholder mixin
  • SASS font default variable