翔子丶
翔子丶

使用Glup完成项目自动化构建

简介

自动化构建是前端工程化的一个重要组成部分，将源代码转换为生成代码；这样就可以在开发过程中使用提高效率的语法、规范和标准

比如我们可以通过：

  • 使用ECMAScript提高代码效率和质量
  • 使用Sass增强css的可编程性
  • 利用模板引擎抽象页面中重复的页面

这些在浏览器中是不支持的，所有可以通过自动化构建工具转换这些不被支持的特性

  • 示例：通过Sass增强css的可编程性

    $body-bg: #000;
$body-color: #f00;
body {
  margin: 0 auto;
  padding: 20px;
  max-width: 800px;
  background-color: $body-bg;
  color: $body-color;
}

    1. 首先安装sass模块，作为开发依赖yarn add sass --dev

    2. 安装完成可以直接使用node_modules下的sass命令npx sass

    3. 将sacc文件转换为cssnpx sass scss/main.scss css/style.css，并且自动添加source-map文件

      body {
  margin: 0 auto;
  padding: 20px;
  max-width: 800px;
  background-color: #000;
  color: #f00;
}

    4. 可以将命令定义在NPM Scripts中，便于使用，在package.json中添加命令

    5. NPM Scripts是实现自动化构建工作流最简单的方式，安装browser-sync模块启动测试服务器运行项目 yarn add browser-sync --dev

      "scripts": {
    "build": "sass scss/main.scss css/style.css",
    "serve": "browser-sync ."
}

    6. yarn serve就可以直接运行我们的项目

    7. 我们可以给sass添加--watch参数用来监听文件变化，一旦scss文件发生改变就自动转换为css文件

    8. 使用npm-run-all模块run-p命令实现多个命令依次执行 yarn add npm-run-all --dev，同时给browser-sync模块添加--files属性监听项目文件变化，更新浏览器界面，避免手动刷新浏览器

      "scripts": {
    "build": "sass scss/main.scss css/style.css --watch",
    "serve": "browser-sync . --files \"css/*.css\"",
    "start": "run-p build serve"
}
常用自动化构建工具
  • Grunt
  • Gulp
  • FIS
Grunt使用

  1. 安装grunt模块yarn add grunt

  2. 添加gruntfile.js文件，作为grunt的入口文件

  3. 使用grunt.registerTask注册任务，通过yarn grunt xxx任务名的方式运行任务

    // gruntfile.js 入口文件 定义一些需要 Grunt 自动执行的任务 
// grunt 对象中提供一些创建任务时会用到的 API
module.exports = (grunt) => {
  grunt.registerTask('foo', 'a sample task', () => {
    console.log('hello grunt')
  })

  grunt.registerTask('bar', () => {
    console.log('other task')
  })
  // default 是默认任务名称 第二个参数可以指定此任务的映射任务 通过 grunt 执行时可以省略
  // 这里映射的任务会按顺序依次执行，不会同步执行
  grunt.registerTask('default', ['foo', 'bar'])
  // 也可以在任务函数中执行其他任务  
  grunt.registerTask('run-task', () => {
    // foo 和 bar 会在当前任务执行完成过后自动依次执行
    grunt.task.run('foo', 'bar')
    console.log('run-task')
  })
  // 由于函数体中需要使用 this，所以这里不能使用箭头函数
  grunt.registerTask('async-task', function () {
    // 异步方式需要使用this.async() 方法创建回调函数
    const done = this.async()
    setTimeout(() => {
      console.log('async task working~')
      done()
    }, 1000)
  })
}
image-20210116155205854.png

  1. 标记任务失败

    module.exports = (grunt) => {
  // 返回false 则意味任务执行失败
  grunt.registerTask('bad', () => {
    console.log('bad working')
    return false
  })
  grunt.registerTask('foo', 'a sample task', () => {
    console.log('hello grunt')
  })

  grunt.registerTask('bar', () => {
    console.log('other task')
  })

  // 如果任务执行失败 则后续不再进行 此时添加--force参数强制执行
  grunt.registerTask('default', ['foo', 'bad', 'bar'])

  // 异步函数中标记当前任务执行失败的方式是为回调函数指定一个 false 的实参
  grunt.registerTask('bad-async', function () {
    const done = this.async()
    setTimeout(() => {
      console.log('async task working~')
      done(false)
    }, 1000)
  })
}
image-20210116155800989.png

  1. Grunt配置方法

    module.exports = (grunt) => {
  // grunt.initConfig() 用于为任务添加一些配置选项
  grunt.initConfig({
    // 键一般对应任务的名称
    // 值可以是任意类型的数据
    foo: {
      bar: 'bar',
    },
  })

  grunt.registerTask('foo', () => {
    // 通过grunt.config获取
    console.log(grunt.config('foo.bar')) // bar
  })
}

  2. Grunt多目标任务

    module.exports = (grunt) => {
    // 多目标模式，可以让任务根据配置形成多个子任务
    grunt.initConfig({
        build: {
            js: 1,
            css: 2,
        },
    })
    grunt.registerMultiTask('build', function () {
        console.log(`task: build, target: ${this.target}, data: ${this.data}`)
    })
}
grunt.initConfig({
    build: {
        options: {
            msg: 'task options',
        },
        foo: {
            options: {
                msg: 'foo target options',
            },
        },
        bar: '456',
    },
})

grunt.registerMultiTask('build', function () {
    // options可以获取对应的options 如果子任务有options会被覆盖
    console.log(this.options())
})

    可以单独运行build:css，也可以一次运行

image-20210116160716843.png

  1. Grunt常用插件

    const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')

module.exports = grunt => {
  grunt.initConfig({
    sass: {
      options: {
        sourceMap: true,
        implementation: sass
      },
      main: {
        files: {
          'dist/css/main.css': 'src/scss/main.scss'
        }
      }
    },
    babel: {
      options: {
        sourceMap: true,
        presets: ['@babel/preset-env']
      },
      main: {
        files: {
          'dist/js/app.js': 'src/js/app.js'
        }
      }
    },
    watch: {
      js: {
        files: ['src/js/*.js'],
        tasks: ['babel']
      },
      css: {
        files: ['src/scss/*.scss'],
        tasks: ['sass']
      }
    }
  })

  // grunt.loadNpmTasks('grunt-sass')
  loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务

  grunt.registerTask('default', ['sass', 'babel', 'watch'])
}
Gulp

  1. Gulp基本使用

    • yarn init --yes初始化项目
    • 安装gulp模块yarn add gulp --dev
    • 创建gulpfile.js文件，gulp的入口文件
    // gulp 的任务函数都是异步的
// 可以通过调用回调函数标识任务完成
exports.foo = done => {
  console.log('foo task working~')
  done() // 标识任务执行完成
}

// default 是默认任务
// 在运行是可以省略任务名参数
exports.default = done => {
  console.log('default task working~')
  done()
}
image-20210116162143650.png

  1. Gulp组合任务

    const { series, parallel } = require('gulp')

const task1 = done => {
  setTimeout(() => {
    console.log('task1 working~')
    done()
  }, 1000)
}
const task2 = done => {
  setTimeout(() => {
    console.log('task2 working~')
    done()
  }, 1000)  
}
const task3 = done => {
  setTimeout(() => {
    console.log('task3 working~')
    done()
  }, 1000)  
}
// 让多个任务按照顺序依次执行 串行任务 部署任务
exports.foo = series(task1, task2, task3)
// 让多个任务同时执行 并行任务 编译js、css任务
exports.bar = parallel(task1, task2, task3)
image-20210116162659123.png

  1. Gulp异步任务

    const fs = require('fs')

exports.callback = done => {
  console.log('callback task')
  done()
}
// 错误优先 一旦出错 就不会在执行后面的任务
exports.callback_error = done => {
  console.log('callback task')
  done(new Error('task failed'))
}

exports.promise = () => {
  console.log('promise task')
  return Promise.resolve()
}
// 失败状态 Gulp认为是失败任务 同样种植后面任务
exports.promise_error = () => {
  console.log('promise task')
  return Promise.reject(new Error('task failed'))
}

const timeout = time => {
  return new Promise(resolve => {
    setTimeout(resolve, time)
  })
}

exports.async = async () => {
  await timeout(1000)
  console.log('async task')
}

// 构建系统大都在处理文件
exports.stream = () => {
  const read = fs.createReadStream('yarn.lock')
  const write = fs.createWriteStream('a.txt')
  read.pipe(write)
  return read
}

exports.stream1 = done => {
  const read = fs.createReadStream('yarn.lock')
  const write = fs.createWriteStream('a.txt')
  read.pipe(write)
  read.on('end', () => {
    done()
  })
}

  2. Gulp构建过程核心工作原理

    const fs = require('fs')
const { Transform } = require('stream')

// 过程 输入 -- 加工 -- 输出
exports.default = () => {
  // 文件读取流
  const readStream = fs.createReadStream('normalize.css')
  // 文件写入流
  // const writeStream = fs.createWriteStream('normalize.bak.css')
  const writeStream = fs.createWriteStream('normalize.min.css')

  // 文件转换流
  const transformStream = new Transform({
    // 核心转换过程
    transform: (chunk, encoding, callback) => {
      const input = chunk.toString()
      const output = input.replace(/s+/g, '').replace(/\/\*.+?\*\//g, '')
      // 第一个参数为错误对象 如果没有 返回null
      callback(null, output)
    },
  })

  // 把读取出的文件流导入写入文件流
  return readStream
    .pipe(transformStream) // 转换
    .pipe(writeStream) // 写入
}

    Gulp的核心工作原理就是输入（读取流） -- 加工（转换流） -- 输出（写入流）

  3. Gulp文件操作API

    // src方法创建读取流 借助插件提供的转换流实现文件加工 dest方法创建写入流
const { src, dest } = require('gulp')
const cleanCSS = require('gulp-clean-css')
const rename = require('gulp-rename')

exports.default = () => {
  return src('src/*.css')
    .pipe(cleanCSS()) // 负责文件加工的转换流 通过插件方式实现
    .pipe(rename({ extname: '.min.css' })) // 可以执行多个插件
    .pipe(dest('dist'))
}

  4. Gulp实现自动化工作流

    /**
 * 1.首先yarn add gulp --dev安装gulp
 * 2.使用src和dest输入流和输出流 此时yarn gulp style 并引入
 * 3.使用gulp-sass转换流 转换sass文件 此时 dist文件夹中存在以前未被删除的scss文件 需手动删除
 * 4.转换ES6语法 使用插件gulp-babel yarn add gulp-babel @babel/core @babel/preset-env --dev 并引入
 * 5.html文件编译 使用gulp-swing yarn add glup-swig --dev 需要定义data完成对EJS语法参数的填充
 * 6.因为三个构建动作可并行执行 所以使用parallel提高构建效率
 * 7.图片和字体文件转换 yarn add gulp-imagemin --dev 并引入
 * 8.至此 src下的文件已经处理完成 需要拷贝public下的文件
 * 9.开发体验增强 自动清除dist文件 yarn add del --save 需要先清除再编译 需要串行任务series
 * 10.自动加载插件 yarn add glup-load-plugins --dev 会自动加载所有插件 所以不用再逐个导入 plugins.xxx使用
 * 11.热更新开发服务器 yarn add browser-sync --dev 启动web服务器
 * 12.监视文件变化 自动更新浏览器 watch监听文件路径匹配符 并执行对应的任务
 * 13.构建过程优化 开发阶段执行的任务 和 不许执行的任务单独分开dev
 * 14.此时基本构建任务已经完成 但html文件中像node_module/xxx/xx.css 这样的css或js文件并没有拷贝到dist目录 使用useref yarn add gulp-useref --dev 将样式文件和js文件合并到新的文件中供页面使用
 * 15.将得到的文件进行压缩处理 yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev 对不同的文件进行不同处理 需要 gulp-if插件
 * 16.保持项目风格 所以需要一个临时文件存储未被useref的文件temp
 * 17.将需要的任务（clean,build,develop等）放在Npm Scripts中去 并且将temp dist目录添加到git忽略文件中
 */
const { src, dest, parallel, series, watch } = require("gulp");
const del = require("del");
const browserSync = require("browser-sync");

const loadPlugins = require("gulp-load-plugins");
const { init } = require("browser-sync");
// 会自动加载所有插件 所以不用再逐个导入
const plugins = loadPlugins();
// 自动创建开发服务器
const bs = browserSync.create();
// html模板文件参数
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 = () => {
  // 需要按照项目的目录输出文件 { base: 'src' }
  return (
    src("src/assets/styles/*.scss", { base: "src" })
      .pipe(plugins.sass({ outputStyle: "expanded" }))
      // 需放入临时目录
      .pipe(dest("temp"))
      // 以流的方式推到浏览器 就不需要监视files: 'dist/**'
      .pipe(bs.reload({ stream: true }))
  );
};

// js编译
const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

// html
const page = () => {
  return src("src/*.html", { base: "src" })
    .pipe(plugins.swig({ data }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

// 图片
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 extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

const serve = () => {
  // 监视文件修改 执行对应命令
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  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({
    notify: false,
    port: 2080,
    // open: false,
    // 目标文件下的内容发生变化时 自动更新浏览器
    // files: 'dist/**',
    server: {
      // 先从数组第一个去找 找不到的话依次找下去
      baseDir: ["temp", "src", "public"],
      // 先看routes下的配置
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const useref = () => {
  return (
    src("temp/*.html", { base: "temp" })
      .pipe(plugins.useref({ searchPath: ["temp", "."] }))
      // 对新创建的文件进行压缩
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true,
          })
        )
      )
      // 不能同时对一个目录进行读写操作 所以需要一个临时文件夹
      .pipe(dest("dist"))
  );
};

// 此处都是需要转换流的文件
const compile = parallel(style, script, page);
// 上线之前执行的任务
const build = series(
  clean,
  parallel(series(compile, useref), image, font, extra)
);
const develop = series(compile, serve);
module.exports = {
  clean,
  build,
  develop,
};

  5. 封装工作流

    1. 如何提取项目当中共同的自动化构建任务（封装自动化构建工作流）在别的项目中直接使用

    2. 首先全局引入配置模块，yarn link，然后在需要使用的地方引入yarn link zce-pages

    3. gulpfile.js中直接导出module.exports = require('zce-pages')

    4. 创建pages.config.js将不应该在公共模块中出现的文件抽象出来，属于项目使用，不应该添加到公共模块

    5. 在模板中获取使用模块的路径const cwd = proces.cwd()

    6. 创建config默认配置文件，将从pages.config.js文件获取的配置与默认配置整合

      let config = {}
try {
  const loadConfig = require(path.join(cwd, '/pages.config.js'))
    config = Object.assign({}, config, loadConfig)
} catch (e) {}

    7. 需要用到配置的地方，使用config.xx代替

      const page = () => {
  return src("src/*.html", { base: "src" })
    .pipe(plugins.swig({ data: config.data }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

    8. 抽象路径配置

      // 将项目中有用到的目录的地方进行替换
let config = {
  // default config
  build: {
    src: "src",
    dist: "dist",
    temp: "temp",
    public: "public",
    paths: {
      styles: "assets/styles/*.scss",
      scripts: "assets/scripts/*.js",
      pages: "*.html",
      images: "assets/images/**",
      fonts: "assets/fonts/**",
    },
  },
};

    9. 包装Gulp CLI

      包装的目的：可以在使用的项目中不需要gulpfile的同时还能使用

      • 首先删除gulpfile文件，再次运行gulp命令，会提示没有gulpfile文件

      • 可以通过指定gulpfile文件目录设置和当前文件目录使用，yarn gulp clean --gulpfile .\node_modules\zce-pages\lib\index.js --cwd .，不过很麻烦

      • 可以在zce-pages中提供cli，将gulp-cli包装到zce-pages中

      • 首先在zce-pages项目package.json中添加"bin": "bin/zce-pages.js"

      • 创建zce-pages.js文件，对gulp-cli的调用放到这个文件中，需要添加文件头#!/usr/bin/env node

      • node_modeuls/bin/gulp.cmd是gulp的执行文件，主要是这句代码node "%~dp0\..\gulp\bin\gulp.js" %*，找到gulp.js文件，执行require('gulp-cli')()而已，所以在我们的zce-pages.js文件中直接调用gulp.js文件require('gulp/bin/gulp')即可

      • 此时，再次gulp命令即可成功，只是还没有gulpfile文件No gulpfile found，此时需要指定gulpfile文件目录

      • 使用process.argv指定--cwd和--gulpfile文件目录

        process.argv.push("--cwd");
process.argv.push(process.cwd());
process.argv.push("--gulpfile");
// 自动找package.json中配置的main目录
process.argv.push(require.resolve(".."));
require("gulp/bin/gulp");

      • 此时，将gulp包装到zce-pages模块，其他项目中不安装gulp同时也可以使用gulp-cli命令

你可能感兴趣的:(使用Glup完成项目自动化构建)

  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update iBaoxing github
    如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
  • 消息中间件有哪些常见类型 xmh-sxh-1314 java
    消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 抖音乐买买怎么加入赚钱?赚钱方法是什么 测评君高省
    你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
  • 水平垂直居中的几种方法（总结） LJ小番茄 CSS_玄学语言htmljavascript前端csscss3
    1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • 2022-04-18 Apbenz
    语重心长的和我说，不要老是说不行，人至而立之年危机四伏，内在的，外在的，感觉就是心力憔悴，让人无所适从。面对职场的无情，突然好羡慕干体力劳动的外卖小哥。难道命运是想让我去送外卖了吗？干体力活才能让我活下去？fastadmin打卡成功,淘宝金币任务完成。ㅏㅓㅗㅜㅡㅣㅐㅔㅑㅕㅛㅠㅢㅒㅖY行。야자여자요리우유의사얘기예
  • C#中使用split分割字符串 互联网打工人no1 c#
    1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
  • Python中os.environ基本介绍及使用方法 鹤冲天Pro #Pythonpython服务器开发语言
    文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
  • Python教程：一文了解使用Python处理XPath 旦莫 Python进阶python开发语言
    目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
  • Google earth studio 简介 陟彼高冈yu 旅游
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
  • linux中sdl的使用教程,sdl使用入门 Melissa Corvinus linux中sdl的使用教程
    本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一
  • LLM 词汇表 落难Coder LLMsNLP大语言模型大模型llama人工智能
    Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数
  • 感赏日志133 马姐读书
    图片发自App感赏自己今天买个扫地机，以后可以解放出来多看点书，让这个智能小机器人替我工作了。感赏孩子最近进步很大，每天按时上学，认真听课，认真背书，主动认真完成老师布置的作业。感赏自己明白自己容易受到某人的影响，心情不好，每当此刻我就会舒缓，感赏，让自己尽快抽离，想好的一面。感赏儿子今天在我提醒他事情时，告诉我谢谢妈妈对我的提醒我明白了，而不是说我啰嗦，管事情，孩子更懂事了，懂得感恩了。投射父母
  • 下载github patch到本地 小米人er 我的博客gitpatch
    以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p
  • 使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器） 编程经验分享 开发工具服务器sshlinux
    目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能
  • 直返最高等级与直返APP：无需邀请码的返利新体验 古楼
    随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，
  • SQL Server_查询某一数据库中的所有表的内容 qq_42772833 SQLServer数据库sqlserver
    1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • 强大的销售团队背后 竟然是大数据分析的身影 蓝儿唯美 数据分析
    Mark Roberge是HubSpot的首席财务官，在招聘销售职位时使用了大量数据分析。但是科技并没有挤走直觉。 大家都知道数理学家实际上已经渗透到了各行各业。这些热衷数据的人们通过处理数据理解商业流程的各个方面，以重组弱点，增强优势。 Mark Roberge是美国HubSpot公司的首席财务官，HubSpot公司在构架集客营销现象方面出过一份力——因此他也是一位数理学家。他使用数据分析
  • Haproxy+Keepalived高可用双机单活 bylijinnan 负载均衡keepalivedhaproxy高可用
    我们的应用MyApp不支持集群，但要求双机单活（两台机器：master和slave）： 1.正常情况下，只有master启动MyApp并提供服务 2.当master发生故障时，slave自动启动本机的MyApp，同时虚拟IP漂移至slave，保持对外提供服务的IP和端口不变 F5据说也能满足上面的需求，但F5的通常用法都是双机双活，单活的话还没研究过 服务器资源 10.7
  • eclipse编辑器中文乱码问题解决 0624chenhong eclipse乱码
    使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题，Eclipse提供了灵活的设置文件编码格式的选项，我们可以通过设置编码 格式解决乱码问题。在Eclipse可以从几个层面设置编码格式：Workspace、Project、Content Type、File 本文以Eclipse 3.3（英文）为例加以说明： 1. 设置Workspace的编码格式： Windows-&g
  • 基础篇--resources资源 不懂事的小屁孩 android
    最近一直在做java开发，偶尔敲点android代码，突然发现有些基础给忘记了，今天用半天时间温顾一下resources的资源。 String.xml    字符串资源   涉及国际化问题  http://www.2cto.com/kf/201302/190394.html   string-array
  • 接上篇补上window平台自动上传证书文件的批处理问卷 酷的飞上天空 window
    @echo off : host=服务器证书域名或ip，需要和部署时服务器的域名或ip一致 ou=公司名称, o=公司名称 set host=localhost set ou=localhost set o=localhost set password=123456 set validity=3650 set salias=s
  • 企业物联网大潮涌动：如何做好准备？ 蓝儿唯美 企业
    物联网的可能性也许是无限的。要找出架构师可以做好准备的领域然后利用日益连接的世界。 尽管物联网（IoT）还很新，企业架构师现在也应该为一个连接更加紧密的未来做好计划，而不是跟上闸门被打开后的集成挑战。“问题不在于物联网正在进入哪些领域，而是哪些地方物联网没有在企业推进，” Gartner研究总监Mike Walker说。 Gartner预测到2020年物联网设备安装量将达260亿，这些设备在全
  • spring学习——数据库（mybatis持久化框架配置） a-john mybatis
    Spring提供了一组数据访问框架，集成了多种数据访问技术。无论是JDBC，iBATIS(mybatis)还是Hibernate，Spring都能够帮助消除持久化代码中单调枯燥的数据访问逻辑。可以依赖Spring来处理底层的数据访问。 mybatis是一种Spring持久化框架，要使用mybatis，就要做好相应的配置： 1，配置数据源。有很多数据源可以选择，如：DBCP，JDBC，aliba
  • Java静态代理、动态代理实例 aijuans Java静态代理
    采用Java代理模式，代理类通过调用委托类对象的方法，来提供特定的服务。委托类需要实现一个业务接口，代理类返回委托类的实例接口对象。 按照代理类的创建时期，可以分为：静态代理和动态代理。 所谓静态代理：　指程序员创建好代理类，编译时直接生成代理类的字节码文件。 所谓动态代理：　在程序运行时，通过反射机制动态生成代理类。   一、静态代理类实例： 1、Serivce.ja
  • Struts1与Struts2的12点区别 asia007 Struts1与Struts2
    1) 在Action实现类方面的对比：Struts 1要求Action类继承一个抽象基类；Struts 1的一个具体问题是使用抽象类编程而不是接口。Struts 2 Action类可以实现一个Action接口，也可以实现其他接口，使可选和定制的服务成为可能。Struts 2提供一个ActionSupport基类去实现常用的接口。即使Action接口不是必须实现的，只有一个包含execute方法的P
  • 初学者要多看看帮助文档 不要用js来写Jquery的代码 百合不是茶 jqueryjs
    解析json数据的时候需要将解析的数据写到文本框中,  出现了用js来写Jquery代码的问题;   1, JQuery的赋值  有问题    代码如下: data.username 表示的是:  网易            $("#use
  • 经理怎么和员工搞好关系和信任 bijian1013 团队项目管理管理
            产品经理应该有坚实的专业基础，这里的基础包括产品方向和产品策略的把握，包括设计，也包括对技术的理解和见识，对运营和市场的敏感，以及良好的沟通和协作能力。换言之，既然是产品经理，整个产品的方方面面都应该能摸得出门道。这也不懂那也不懂，如何让人信服？如何让自己懂？就是不断学习，不仅仅从书本中，更从平时和各种角色的沟通
  • 如何为rich:tree不同类型节点设置右键菜单 sunjing contextMenutreeRichfaces
    组合使用target和targetSelector就可以啦，如下： <rich:tree id="ruleTree" value="#{treeAction.ruleTree}" var="node" nodeType="#{node.type}" selectionChangeListener=&qu
  • 【Redis二】Redis2.8.17搭建主从复制环境 bit1129 redis
    开始使用Redis2.8.17 Redis第一篇在Redis2.4.5上搭建主从复制环境，对它的主从复制的工作机制，真正的惊呆了。不知道Redis2.8.17的主从复制机制是怎样的，Redis到了2.4.5这个版本，主从复制还做成那样，Impossible is nothing! 本篇把主从复制环境再搭一遍看看效果，这次在Unbuntu上用官方支持的版本。   Ubuntu上安装Red
  • JSONObject转换JSON--将Date转换为指定格式 白糖_ JSONObject
    项目中，经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串，而JavaBean的属性有时候会有java.util.Date这个类型的时间对象，这时JSONObject默认会将Date属性转换成这样的格式：   {"nanos":0,"time":-27076233600000,
  • JavaScript语言精粹读书笔记 braveCS JavaScript
    【经典用法】：   //①定义新方法 Function .prototype.method=function(name, func){ this.prototype[name]=func; return this; } //②给Object增加一个create方法，这个方法创建一个使用原对
  • 编程之美-找符合条件的整数 用字符串来表示大整数避免溢出 bylijinnan 编程之美
    import java.util.LinkedList; public class FindInteger { /** * 编程之美 找符合条件的整数 用字符串来表示大整数避免溢出 * 题目：任意给定一个正整数N，求一个最小的正整数M(M>1)，使得N*M的十进制表示形式里只含有1和0 * * 假设当前正在搜索由0，1组成的K位十进制数
  • 读书笔记 chengxuyuancsdn 读书笔记
    1、Struts访问资源 2、把静态参数传递给一个动作 3、<result>type属性 4、s:iterator、s:if c:forEach 5、StringBuilder和StringBuffer 6、spring配置拦截器 1、访问资源 (1)通过ServletActionContext对象和实现ServletContextAware,ServletReque
  • [通讯与电力]光网城市建设的一些问题 comsci 问题
          信号防护的问题,前面已经说过了,这里要说光网交换机与市电保障的关系       我们过去用的ADSL线路,因为是电话线,在小区和街道电力中断的情况下,只要在家里用笔记本电脑+蓄电池,连接ADSL,同样可以上网........     
  • oracle 空间RESUMABLE daizj oracle空间不足RESUMABLE错误挂起
    空间RESUMABLE操作  转 Oracle从9i开始引入这个功能，当出现空间不足等相关的错误时，Oracle可以不是马上返回错误信息，并回滚当前的操作，而是将操作挂起，直到挂起时间超过RESUMABLE TIMEOUT，或者空间不足的错误被解决。 这一篇简单介绍空间RESUMABLE的例子。 第一次碰到这个特性是在一次安装9i数据库的过程中，在利用D
  • 重构第一次写的线程池 dieslrae 线程池 python
    最近没有什么学习欲望,修改之前的线程池的计划一直搁置,这几天比较闲,还是做了一次重构,由之前的2个类拆分为现在的4个类. 1、首先是工作线程类:TaskThread,此类为一个工作线程,用于完成一个工作任务,提供等待(wait),继续(proceed),绑定任务(bindTask)等方法 #!/usr/bin/env python # -*- coding:utf8 -*-
  • C语言学习六指针 dcj3sjt126com c
    初识指针，简单示例程序： /* 指针就是地址，地址就是指针 地址就是内存单元的编号 指针变量是存放地址的变量 指针和指针变量是两个不同的概念 但是要注意： 通常我们叙述时会把指针变量简称为指针，实际它们含义并不一样 */ # include <stdio.h> int main(void) { int * p; // p是变量的名字， int *
  • yii2 beforeSave afterSave beforeDelete dcj3sjt126com delete
    public function afterSave($insert, $changedAttributes) { parent::afterSave($insert, $changedAttributes); if($insert) { //这里是新增数据 } else { //这里是更新数据 } }  
  • timertask shuizhaosi888 timertask
    java.util.Timer timer = new java.util.Timer(true); // true 说明这个timer以daemon方式运行（优先级低， // 程序结束timer也自动结束），注意，javax.swing // 包中也有一个Timer类，如果import中用到swing包， // 要注意名字的冲突。 TimerTask task = new
  • Spring Security（13）——session管理 234390216 sessionSpring Security攻击保护超时
    session管理 目录   1.1     检测session超时 1.2     concurrency-control 1.3     session 固定攻击保护         
  • 公司项目NODEJS实践0.3[ mongo / session ...] 逐行分析JS源代码 mongodbsessionnodejs
        http://www.upopen.cn   一、前言         书接上回，我们搭建了WEB服务端路由、模板等功能，完成了register 通过ajax与后端的通信，今天主要完成数据与mongodb的存取，实现注册 / 登录 /
  • pojo.vo.po.domain区别 LiaoJuncai javaVOPOJOjavabeandomain
    　　POJO = "Plain Old Java Object"，是MartinFowler等发明的一个术语，用来表示普通的Java对象，不是JavaBean, EntityBean 或者 SessionBean。POJO不但当任何特殊的角色，也不实现任何特殊的Java框架的接口如，EJB， JDBC等等。 　　 　　即POJO是一个简单的普通的Java对象，它包含业务逻辑
  • Windows Error Code OhMyCC windows
    0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足, 无法处理此命令. 9 存储控制块地址无效. 10 环境错误. 11 试图加载格式错误的程序. 12 访问码无效. 13 数据无效. 14 存储器不足, 无法完成此操作. 15 系
  • 在storm集群环境下发布Topology roadrunners 集群stormtopologyspoutbolt
    storm的topology设计和开发就略过了。本章主要来说说如何在storm的集群环境中，通过storm的管理命令来发布和管理集群中的topology。   1、打包 打包插件是使用maven提供的maven-shade-plugin，详细见maven-shade-plugin。 <plugin> <groupId>org.apache.maven.
  • 为什么不允许代码里出现“魔数” tomcat_oracle java
    　　在一个新项目中，我最先做的事情之一，就是建立使用诸如Checkstyle和Findbugs之类工具的准则。目的是制定一些代码规范，以及避免通过静态代码分析就能够检测到的bug。 　　迟早会有人给出案例说这样太离谱了。其中的一个案例是Checkstyle的魔数检查。它会对任何没有定义常量就使用的数字字面量给出警告，除了-1、0、1和2。 　　很多开发者在这个检查方面都有问题，这可以从结果
  • zoj 3511 Cake Robbery(线段树) 阿尔萨斯 线段树
    题目链接：zoj 3511 Cake Robbery 题目大意：就是有一个N边形的蛋糕，切M刀，从中挑选一块边数最多的，保证没有两条边重叠。 解题思路：有多少个顶点即为有多少条边，所以直接按照切刀切掉点的个数排序，然后用线段树维护剩下的还有哪些点。 #include <cstdio> #include <cstring> #include <vector&
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他