zoukankan      html  css  js  c++  java
  • 前端工程化之gulp

    一、gulp
    gulp自动化构建构建工具增强你的工作流程,易于使用、构建快速、插件系统、易于学习.

    1、安装gulp

    #安装
    npm init -y
    yarn add gulp -D
    #查看版本
    npx gulp --version

    #修改package.json

    {
      "name": "gulpdemo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "build": "gulp"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "gulp": "^4.0.2"
      }
    }

    #执行构建

    npm run build

    2、gulp配置文件
    #配置文件gulpfile.js或Gulpfile.js

    //引入gulp的几个方法:
    // src处理源目录 dest目标目录 series串行执行 watch监控文件
    const { src,dest,series,watch } = require('gulp')
    const del = require('del')
    
    //gulp-load-plugins可以将后续gulp开头的插件引用变得简单 不要忘了后面的小括号() 表示直接执行
    //eg:gulp-uglify => plugins.uglify = require('gulp-uglify')
    const plugins = require('gulp-load-plugins')()
    
    //压缩js uglifyjs
    //cb表示回调函数不加执行会报错(https://gulpjs.com/docs/en/getting-started/async-completion/)  Did you forget to signal async completion?
    function js(cb){
        //console.log('this is js scripts tasks')
        src('js/*.js')
            //pipe 管道输送到下一个处理环节
            .pipe(plugins.uglify())
            .pipe(dest('./dist/js'))
        //执行回调
        cb()
    }
    //对scss/less编译 压缩 输出css文件
    function css(cb){
        //console.log('this is css scripts tasks')
        src('css/*.scss')
            //sass压缩
            .pipe(plugins.sass({
                outputStyle:'compressed'
            }))
            //autoprefixer
            .pipe(plugins.autoprefixer({
                cascade:false,//是否使用虚拟cascade
                remove:false//去掉过时的前缀
            }))
            .pipe(dest('./dist/css'))
        cb()
    }
    //监听这些文件变化
    function watcher(){
        //监控的文件路径和类型,当变化时执行哪个函数
        watch('./js/*.js',js)
        watch('./css/*.scss',css)
    }
    //删除dist目录中的内容
    function clean(cb){
        del('./dist')
        cb()
    }
    
    //
    exports.scripts = js
    exports.styles = css
    exports.clean = clean
    exports.watcher = watcher
    //exports.default 表示默认gulp处理方法
    exports.default = series([
        clean,//先清空
        js,
        css,
        watcher
    ])//npm run build串行执行各个方法
    #列出gulp任务清单
    npx gulp --tasks
    #执行scrips任务
    npx gulp scrips

    3、使用gulp插件编写任务

    常用插件:
    gulp-uglify:js压缩、混淆插件
    gulp-rename:重命名插件
    del:清理插件
    gulp-autoprefixer:根据设置浏览器版本自动处理浏览器前缀
    gulp-sass:可以使用sass样式预编译语言
    gulp-load-plugins:使gulp开头的插件的引用变得简单

    #安装
    yarn add del gulp-uglify gulp-rename gulp-autoprefixer gulp-sass gulp-load-plugins -D

    注意:gulp-autoprefixer需要配置浏览器版本清单browserslist

    {
      "name": "gulpdemo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "build": "gulp"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "del": "^6.0.0",
        "gulp": "^4.0.2",
        "gulp-autoprefixer": "^7.0.1",
        "gulp-load-plugins": "^2.0.5",
        "gulp-rename": "^2.0.0",
        "gulp-sass": "^4.1.0",
        "gulp-uglify": "^3.0.2"
      },
      "browserslist": [
        "last 2 Version",
        "> 2%"
      ]
    }

    gulp插件两个搜索地址:

    gulpjs

    npmjs

    4、热编译+浏览器自动刷新
    这里介绍一个插件browser-sync,功能类似express、dev-server;

    #安装browser-sync

    yarn add browser-sync -D

    #gulpfile.js

    //引入gulp的几个方法:
    // src处理源目录 dest目标目录 series串行执行 watch监控文件
    const { src,dest,series,watch } = require('gulp')
    const del = require('del')
    const browserSync = require('browser-sync').create() //引入并初始化browser-sync插件
    const reload = browserSync.reload //刷新浏览器的reload方法
    //gulp-load-plugins可以将后续gulp开头的插件引用变得简单 不要忘了后面的小括号() 表示直接执行
    //eg:gulp-uglify => plugins.uglify = require('gulp-uglify')
    const plugins = require('gulp-load-plugins')()
    
    //压缩js uglifyjs
    //cb表示回调函数不加执行会报错(https://gulpjs.com/docs/en/getting-started/async-completion/)  Did you forget to signal async completion?
    function js(cb){
        //console.log('this is js scripts tasks')
        src('js/*.js')
            //pipe 管道输送到下一个处理环节
            .pipe(plugins.uglify())
            .pipe(dest('./dist/js'))
            .pipe(reload({ stream: true }))
        //执行回调
        cb()
    }
    
    //对scss/less编译 压缩 输出css文件
    function css(cb){
        //console.log('this is css scripts tasks')
        src('css/*.scss')
            //sass压缩
            .pipe(plugins.sass({
                outputStyle:'compressed'
            }))
            //autoprefixer
            .pipe(plugins.autoprefixer({
                cascade:false,//是否使用虚拟cascade
                remove:false//去掉过时的前缀
            }))
            .pipe(dest('./dist/css'))
            .pipe(reload({ stream: true }))
        cb()
    }
    //监听这些文件变化
    function watcher(cb){
        //监控的文件路径和类型,当变化时执行哪个函数
        watch('./js/*.js',js)
        watch('./css/*.scss',css)
        cb()
    }
    //删除dist目录中的内容
    function clean(cb){
        del('./dist')
        cb()
    }
    
    //server任务
    function server(cb){
        browserSync.init({
            server:{
                baseDir:'./'
            }
        })
        cb()
    }
    
    exports.scripts = js
    exports.styles = css
    exports.clean = clean
    exports.watcher = watcher
    //exports.default 表示默认gulp处理方法
    exports.default = series([
        clean,//先清空
        js,
        css,
        server,//启动server
        watcher
    ])//npm run build串行执行各个方法

     index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style rel="stylesheet" href="./dist/css/index.css"/>
    </head>
    <body>
    hello cac2020
    <script src="./dist/js/index.js"></script>
    </body>
    </html>

    代码目录结构:

    参考:
    gulp官网
    gulp文档

  • 相关阅读:
    HDU4529 郑厂长系列故事——N骑士问题 —— 状压DP
    POJ1185 炮兵阵地 —— 状压DP
    BZOJ1415 聪聪和可可 —— 期望 记忆化搜索
    TopCoder SRM420 Div1 RedIsGood —— 期望
    LightOJ
    LightOJ
    后缀数组小结
    URAL
    POJ3581 Sequence —— 后缀数组
    hdu 5269 ZYB loves Xor I
  • 原文地址:https://www.cnblogs.com/cac2020/p/13967512.html
Copyright © 2011-2022 走看看