Introduction: In the last two years, most of the projects have been writing SPA single page application. Suddenly, I wanted to write a static page project with Bootstrap, ES6, Sass and Less. Unexpectedly, I couldn’t think of how to build and implement such front-end engineering development environment, so I got this article after practice.

Need: Listen for changes to HTML, CSS, JS, img, etc., refresh your browser automatically, avoiding the F5 refresh button that used to be used for so long.

Gulp

The description on Gulp’s Chinese website reads: Enhance your workflow with automated build tools!

The new official website looks a bit higher.

My directory structure

| | - build | - CSS, js. | | - images - * HTML | - SRC | | -- - HTML sass. | | - js | - images - gulpfile js | -- package. JsonCopy the code

The configuration steps

Install gulp globally – CLI command line tool

npm install gulp-cli -g
Copy the code

Create the project directory static and create package.json in the root directory

npm init
Copy the code

Install gulp as a development-time dependency

npm install --save-dev gulp
Copy the code

Create the gulpfile.js file

touch  gulpfile.js
Copy the code

The specific requirements

  • Copy the files from the SRC/HTML folder to the build root directory
  • Precompile *. SCSS files from SRC /sass to build/ CSS
  • Precompile *. Js files from SRC /js into build/js folder
  • Precompile the image files in the SRC /images file into the build/images folder
  • Monitor changes in HTML, CSS, JS, images and other files, refresh the browser in real time

Gulpfile. js configuration file

const { src, dest, parallel,series, watch } = require('gulp');
const sass = require('gulp-sass');
const less = require('gulp-less');
const image = require('gulp-imagemin');
const minifyCSS = require('gulp-csso');
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const autoprefixer = require('gulp-autoprefixer')
const browserSync = require('browser-sync').create()

sass.compiler = require('node-sass');

// Static server
async function serve() {
  await browserSync.init(
    {
      server: {
        baseDir: './build'}})} // HTML copyfunction copy() {
  return src('src/html/*.html')
    .pipe(dest('build'} // Image processingfunction img() {
  return src('src/images/*')
    // .pipe(image())
    .pipe(dest('build/images')); } // CSS compilesfunction css() {
  return src(['src/sass/*.scss'.'node_modules/bootstrap/scss/bootstrap.scss'])
    .pipe(sass())
    // .pipe(src('src/less/*.less'))
    // .pipe(less())
    .pipe(autoprefixer({ overrideBrowserslist: ['last 8 versions'] }))
    .pipe(minifyCSS())
    .pipe(dest('build/css'} // js compiledfunction js() {
  return src(['src/js/*.js'], { sourcemaps: true })
    .pipe(babel({
      presets: ["@babel/env"]
    }))
    .pipe(concat('app.min.js'))
    .pipe(dest('build/js', { sourcemaps: true}))} // Browser customization refreshfunction reload(done) {
  browserSync.reload()
  done} // Start the listenerfunction watcher(done) {
  watch("src/imgs/*", series(img, reload));
  watch("src/sass/*.scss", series(css, reload));
  watch("src/js/*.js", series(js, reload));
  watch("src/html/*.html", series(copy, reload));
  done(a); } exports.js = js; exports.img = img; exports.css = css; exports.copy = copy; exports.default = parallel(js, css, img, copy, serve, watcher);Copy the code