Gulp automates painful or time-consuming tasks in the development process, thereby reducing the time you waste and creating more value.

How do I understand this? In simple terms, it is to automatically convert the source code written in the development stage into the code or program that can be run by the generation environment. We call this process automatic build workflow, and the function is to get rid of the problems caused by the compatibility of the runtime environment as far as possible. Grammar, specifications, standards that we use during development to improve efficiency.

How to build a Gulp automated build?

First initialize

Mkdir my-gulp CD my-gulp yarn init --yes // initialize package yarn add gulp --dev // install gulp moduleCopy the code

Create gulpfile.js and define the build tasks to be performed in this file. This file is the gulp entry file that runs in node.js, so you can use the common.js specification. How does gulp work?

Build process: The file is read out for some conversion, and finally written to another location. In the case of no build system, this process is followed manually. For example, to compress JS files, first copy the code, compress it in the code compression tool, and then paste the compressed result into a new file. This is a manual process.

Provide a number of the API in the gulp, www.gulpjs.com.cn/docs/api/sr…

  • SRC reads files. The first parameter is to read the specified file path. Wildcard characters are supported to match batch files

  • Dest writes to a file and specifies the specified file to be written to

  • Parallel asynchronous execution

  • Series synchronous execution

  • Watch listens for changes in files and decides whether or not to perform a task based on those changes

    const {src, dest} = require(‘gulp’)

    Const sass = require(‘gulp-sass’)const Babel = require(‘gulp-babel’ const style = () => { return src(‘src/assets/styles/*.scss’, {base: ‘SRC ‘}) // Reads all SCSS files under styles. pipe({outputStyle: ‘expanded’})) // Compile sass into css.pipe (dest(‘dist’)) // Write the built file to dist directory}

    const scripts = () => { // yarn add @babel/core @babel/preset-env –dev return src(‘src/assets/scripts/*.js’, {base: ‘src’}) .pipe(babel({presets: [‘@babel/preset-env’]})) .pipe(dest(‘dist’)) }

    const page = () => { return src(‘src/*.html’, {base: ‘src’}) .pipe(swig({data})) .pipe(dest(‘dist’)) }

    const image = () => { return src(‘src/assets/images/**’, {base: ‘src’}) .pipe(imagemin()) .pipe(dest(‘dist’)) }

    const font = () => { return src(‘src/assets/fonts/**’, {base: ‘src’}) .pipe(imagemin()) .pipe(dest(‘dist’)) }

    module.exports = { style, scripts, page, image, font }

    Install the corresponding plug-in yarn add gulp-babel –devyarn add @babel/ core@babel /preset-env –devyarn add gulp-sass –devyarn add gulp-swig –devyarn add gulp-imagemin — dev

    Run yarn gulp style or yarn gulp scripts or yarn gulp page.

This is the simple gulP working process

/ / realize the construction of the project/task/SRC read a file, the first parameter specifies the path to the file for reading, support the use of wildcard matching batch file, the second parameter as a benchmark road king / / through the plugin will read the file conversion / / dest written to the file, // parallel executes asynchronously // series executes synchronously // watch automatically monitors the wildcard of a file, and according to the changes of these files, Const {SRC, dest, parallel, series, Watch} = require('gulp') const del = require('del') // browser-sync supports hot updates to the browser after modifying the code. // This module provides a creat method to create a server const browserSync = require('browser-sync') const bs = browsersync.create () const LoadPlugins = require('gulp-load-plugins') // Export an object const plugins = loadPlugins() // Install gulp-sass Gulp-swig gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-imagemin gulp-useref // gulp-ugilfy // gulp-clean-css // gulp-clean-css // gulp-clean-css // gulp-clean-css const data = {menus: [{name: 'Home', icon: 'aperture', link: 'index.html' }, { name: 'Features', link: 'features.html' }, { name: 'About', link: 'about.html' }, { name: 'Contact', link: '#', children: [ { name: 'Twitter', link: 'https://twitter.com/w_zce' }, { name: 'About', link: 'https://weibo.com/zceme' }, { name: 'divider' }, { name: 'About', link: 'https://github.com/zce' } ] } ], pkg: require('./package.json'), date: new Date() } const clean = () => { return del(['dist', 'temp']) } const style = () => { return src('src/assets/styles/*.scss', {base: 'src'}) .pipe(plugins.sass({outputStyle: 'expanded'})) .pipe(dest('temp')) .pipe(bs.reload({ stream: } const scripts = () => {return SRC (' SRC /assets/scripts/*.js', {base: 'src'}) .pipe(plugins.babel({presets: ['@babel/preset-env']})) .pipe(dest('temp')) .pipe(bs.reload({ stream: } const page = () => {return SRC (' SRC /**/*.html', {base: 'src'}) .pipe(plugins.swig({ data })) .pipe(dest('temp')) .pipe(bs.reload({ stream: } const extra = () => {return SRC ('public/**', {base: 'public'}) .pipe(dest('dist')) } const image = () => { return src('src/assets/images/**', {base: 'src'}) .pipe(plugins.imagemin()) .pipe(dest('dist')) } const font = () => { return src('src/assets/fonts/**', {base: 'src'}) .pipe(plugins.imagemin()) .pipe(dest('dist')) } // const sever = () => { watch('src/assets/styles/*.scss', style) watch('src/assets/scripts/*.js', scripts) watch('src/*.html', page) // watch('src/assets/images/**', image) // watch('src/assets/fonts/**', font ) // watch('public/**', extra) watch([ 'src/assets/images/**', 'SRC /assets/fonts/**', 'public/**'], bs.reload) bs.init({// initialize notify: false, port: 8090, // default port: // open: BaseDir: {baseDir: ['temp', 'SRC ', 'public'], // routes: { '/node_modules': 'node_modules' } } }) } const useref = () => { return src('temp/**/*.html', {base: 'temp'}) .pipe(plugins.useref({ searchPath: ['temp', '.']})) // Need to compress HTML, CSS, js files respectively, Will need to file for judgment. Pipe (plugins. If (/ \. Js $/ plugins. Uglify ())), pipe (plugins. If ($/, / \. CSS plugins.cleanCss())) .pipe(plugins.if(/\.html$/, plugins.htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: Pipe (dest('dist'))} const complit = parallel(style, scripts, page) const build = series(clean, dist) parallel(series(complit, useref), extra)) const develop = series(complit, sever) module.exports = { clean, build, develop }Copy the code

Manage gulp commands in NPM Scripts