Gulp (a)

Gulp and gulp – less

I recently had a requirement to write pages in a scenario other than three frames. Like the official website or something.

The original plan was to use WebPack to package SCSS files into CSS and separate them, but one of the plug-ins is being used. The ExtractTextPlugin is always reporting errors…

One day the debug

Therefore, it is more cost-effective to use GULP if you encounter similar requirements.

gulp

If you are not familiar with it, please read the official website documents first

Quick start

Official website Article 1

npm install gulp-cli -g

npm install gulp -D

You need to create a file directory in the following format (I have the right of final interpretation)

  • Dist: After processing js CSS and so on you need to reference
    • js
    • css
    • .
  • src :
    • es
    • less
    • .
  • Index.html home page
  • Postcss.config. js Postcss configuration is not yd
  • Gulpfile.js This is the only name for the gulp configuration file
Create a file

Package. json may have extra packages, but this is written and compiled so en~~


{
  "name": "gulptemp"."version": "1.0.0"."description": ""."main": "gulpfile.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.13.14"."@babel/preset-env": "^ 7.13.12"."gulp": "^ 4.0.2." "."gulp-autoprefixer": "^" 7.0.1."gulp-babel": "^ 8.0.0." "."gulp-postcss": "^ 9.0.0"."gulp-pxtorem": "^ 3.0.0"."postcss": "^ 8.2.9"."postcss-less": "^ 4.0.1." "."postcss-plugin": "^ 1.0.0"."sugarss": "^ 3.0.3." "
  },
  "dependencies": {
    "gulp-less": "^ 4.0.1." "}}Copy the code

gulpfile.js


const { watch, series, task, src, dest } = require('gulp');
const less = require('gulp-less');
const pxtorem = require('gulp-pxtorem');
const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
/ / deal with js
function es(cb) {
  src('./src/es/*.js')
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(dest('./dist/js'));
  cb();
}

function css(cb) {
  src('./src/less/*.less')
    .pipe(less()) / / less CSS
    .pipe(autoprefixer({ // Automatically add the prefix
      cascade: false
    }))
    .pipe(pxtorem({ / / into rem
      rootValue: 37.5
    }))
    .pipe(dest('./dist/css'));
  cb();
}

task('dev'.function(cb) {
  watch('src/es/*.js', series(es))
  watch('src/less/*.less', series(css))
  cb()
})

Copy the code

run

  // Above I only put some of the most important files
  
  npm install
  
  // Execute command to run this project I did not write configuration you would write I am lazy
  gulp dev 

  // The server is not currently startedVscode has a built-in one that I don't want to writeCopy the code