美文网首页大前端
自动化构建02

自动化构建02

作者: 丽__ | 来源:发表于2021-08-27 11:57 被阅读0次
常用的自动化构建工具 Grunt Gulp FIS
image.png

  • Grunt

yarn init --yes  添加package.json
yarn add grunt  添加grunt模块
code gruntfile.js 添加gruntfile文件  （Grunt 的入口文件，用于定义一些需要Grunt自动执行的任务）使用

// Grunt 的入口文件
// 用于定义一些需要Grunt自动执行的任务
/**
 * 需要导出一个函数
 * 次函数接收一个grunt的形参，内部提供一些创建任务时候可以用到的API
 * 
 */

module.exports = grunt => {
    // 使用registerTask 注册一个任务
    grunt.registerTask('foo', () => {
        console.log('hello grunt 测试');
    })
    grunt.registerTask('bar', '任务描述', () => {
        console.log('第二个参数是当前任务的描述');
    })
    // grunt.registerTask('default',() => {
    //     console.log('默认任务，调用不需要指定人物名');
    // })
    // grunt.registerTask('default', ['foo', 'bar']); //默认同时执行两个任务

    grunt.registerTask('asyncTask', () => {
        setTimeout(() => {
            console.log('grunt 默认支持同步任务当前写法不打印');
        }, 1000);
    })

    grunt.registerTask('asyncTask1', function () {
        const done = this.async();
        setTimeout(() => {
            console.log('grunt 异步 需要使用this,所以不使用箭头函数,当done()被执行，grunt才会结束任务');
            done();
        }, 1000);
    })
}

yarn grunt <任务名>   执行
  • Grunt标记任务失败
grunt.registerTask('foo', () => {
      console.log('hello grunt 测试');
      return false;
})
grunt.registerTask('bad', () => {
      console.log('hello grunt 测试');
})
grunt.registerTask('far', () => {
      console.log('hello grunt 测试');
})

grunt.registerTask('default', ['bad', 'foo','far']);


grunt.registerTask('fooAsync', () => {
     const done = this.async();
     setTimeout(() => {
         console.log('grunt 异步 需要使用this,所以不使用箭头函数,当done()被执行，grunt才会结束任务');
         done(false);
      }, 1000);
})
当任务里有return false,后面的语句将都不会执行；
当运行yarn grunt default --force ，即使运行失败了，后面也会执行

异步任务标记失败，需要在done()中传递实参false，既done(false)
  • Grunt 配置方法
grunt.initConfig({
    foo:{
          bar:123
     },
    red:132
})
grunt.registerTask('init-config', () => {
    console.log(grunt.config('foo.bar'));
    console.log(grunt.config('red'));
})
  • Grunt 多任务
module.exports = grunt => {

    grunt.initConfig({
        build: {
            options: { //配置选项
                foo: "bar"
            },
            css: '1',
            js: '2',
            vue: {
                options: { //配置选项
                    foo: "baz";//会覆盖原有的配置项
                },
            }
        }
    })

    // 多目标模式，可以让任务根据配置形成多个子任务
    grunt.registerMultiTask('build', function () {
        console.log(this.options()); //可以获取配置选项
        console.log(`target:${this.target},data:${this.data}`); //target:css,data:1;    target:js,data:2
    })

}
  • Grunt 插件的使用

安装插件

yarn add grunt-contrib-clean

gruntfile.js

module.exports = grunt =>{
  grunt.initConfit({
    clean:{
        temp:'temp/***'
      }
  })
  
  grunt.loadNpmTasks('grunt-contrib-clean')
}
  • Grunt 常用插件及总结

sass的基本使用

yarn add grunt-sass  sass --dev

gruntfile.js

const sass = require("sass");
module.exports = (grunt) => {
  grunt.initConfig({
    sass: {
      options: {
        sourceMap: true,
        implementation: sass,
      },
      main: {
        files: {
          "dist/css/main.css": "src/scss/main.scss",
        },
      },
    },
  });
  grunt.loadNpmTasks("grunt-sass");
};


//执行
yarn  grunt  sass

es6语法编译器

yarn add grunt-babel @babel/core @babel/preset-env --dev

减少loadNpmTasks的使用

yarn add load-grunt-tasts --dev


const loadGruntTasks = require("load-grunt-tasks");
module.exports = (grunt) => {
  grunt.initConfig({
    babel: {
      options: {
        presets: ["@babel/preset-env"],
      },
      main: {
        files: {
          "dist/js/app.js": "src/js/app.js",
        },
      },
    },
  });
  loadGruntTasks(grunt); //自动加载所有的grunt插件中的任务
};


//执行任务
yarn grunt babel

自动编译插件

yarn add grunt-contrib-watch --dev

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: {
        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"]);


  //  运行  yarn grunt
};

  • Gulp 的基本使用

yarn init --yes     添加package.json
yarn add gulp --dev    添加gulp 模块
code gulpfile.js        添加gulpfile文件  （gulp 的入口文件，用于定义一些需要gulp 自动执行的任务）使用

gulpfile.js

// glup 入口文件

exports.foo = (done)=>{
    console.log('foo task working')
    done();//标识任务完成
}

exports.default = (done)=>{  //默认执行任务不需要带名字
    console.log('default task working')
    done();//标识任务完成
}


// 不推荐这种方式
const gulp = require('gulp')
gulp.task('bar',done=>{
    console.log('bar working');
    done();
})
  • Gulp 的组合任务
// glup 入口文件
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);//  series自动按照顺序自动执行任务
exports.bar = parallel(task1,task2,task3) // parallel 并行执行任务

执行 yarn gulp foo
执行 yarn gulp bar
image.png
  • Gulp 的异步任务
// glup 入口文件

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();
}

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 readStream = fs.createReadStream('package.json')
    const writeStream = fs.createWriteStream('temp.txt')
    readStream.pipe(writeStream)
    return readStream
}


exports.stream_end = (done)=>{
    const readStream = fs.createReadStream('package.json')
    const writeStream = fs.createWriteStream('temp2.txt')
    readStream.pipe(writeStream)
    readStream.on('end',()=>{
        console.log('OK!');
        done();
    })
}
  • Gulp 构建过程核心工作原理
const fs = require('fs') 
const {Transform} = require('stream')


exports.default = ()=>{
    // 读取文件流
    const read = fs.createReadStream('normalize.css')
    // 文件写入流
    const write = fs.createWriteStream('normalize.min.css')

    // 文件转换流
    const transform = new Transform({
        transform:(chunk,encoding,callback)=>{
            // 核心转换过程
            // chunk ==>读取流中的内容(Buffer)
            const input = chunk.toString();
            const output = input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')
            callback(null,output)
        }
    })

    // 把读取数来的文件流倒入写入文件流
    read.pipe(transform).pipe(write)

    return read;
}
  • Gulp 文件操作API

压缩转换css流

yarn add gulp-clean-css --dev

后缀重命名

yarn add gulp-rename --dev

const { src, dest } = require("gulp");
const cleanCss = require("gulp-clean-css"); //压缩css插件
const rename = require("gulp-rename"); //重命名的扩展名

exports.default = () => {
  //   return src("src/index.css").pipe(dest("dist"));
  return src("src/*.css")
    .pipe(cleanCss())
    .pipe(rename({ extname: ".min.css" }))
    .pipe(dest("dist"));
};
  • Gulp 案例-样式编译
yarn add gulp --dev    // 安装gulp
code gulpfile.js    //新建gulpfile.js 入口文件
yarn add gulp-sass sass --dev  //安装sass 依赖
  • Gulp 案例- 脚本编译
yarn add  gulp-babel  @babel/core @babel/preset-env --dev   //安装babel 依赖
  • Gulp 案例- 页面模板编译
yarn add gulp-swig --dev    //安装swig依赖
  • Gulp 案例 - 其他文件及文件清除
yarn add gulp-imagemin@7 --dev   安装压缩图片依赖

因为依赖包里面有二进制文件，这些二进制文件不好下载，所以当下在包出现问题的时候可以参考

https://gitee.com/lagoufed/fed-e-questions/blob/master/part2/%E4%B8%8B%E8%BD%BD%E5%8C%85%E6%98%AF%E5%87%BA%E9%94%99%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E5%BC%8F.md

 yarn add del --dev  //安装清除模块
  • Gulp 案例 - 自动加载插件
yarn add gulp-load-plugins --dev
  • Gulp 案例- 开发服务器
yarn add browser-sync --dev   //会提供给我们一个开发服务器
  • Gulp 案例- 监视变化以及构建优化
 watch("src/assets/styles/*.scss", style);
 watch("src/assets/scripts/*.js", script);
watch("src/*.html", page);

 watch(
    ["src/assets/styles/*.scss", "src/assets/scripts/*.js", "src/*.html"],
    bs.reload
  ); //优化上面写法
  • Gulp 案例- useref文件引用处理
yarn add gulp-useref --dev   //下载插件
  • Gulp 案例 - 文件压缩
yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev    //下载压缩html   js   css   插件

yarn add gulp-if --dev  //判断文件类型的插件

// 实现这个项目的构建任务
const { src, dest, parallel, series, watch } = require("gulp");

const del = require("del"); //引入del
const browserSync = require("browser-sync"); //引入服务器browserSync

const loadPlugins = require("gulp-load-plugins"); //引入自动加载模块

const plugins = loadPlugins();
const bs = browserSync.create(); //创建一个服务器

const sass = require("gulp-sass")(require("sass")); //引入gulp-sass
// const babel = require("gulp-babel"); //引入gulp-babel
// const swig = require("gulp-swig"); //引入swig
// const imagemin = require("gulp-imagemin"); //引入gulp-imagemin  压缩图片和svg

const style = () => {
  // base:基本路径，保存src下面的文件结构
  //   outputStyle:'expanded'   css中{  } 完全展开
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true })); //自动以流的方式推送到浏览器bs.reload({ stream: true })
};

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 })); //自动以流的方式推送到浏览器bs.reload({ stream: true })
};
const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
      ],
    },
  ],
  //   pkg: require("./package.json"),
  date: new Date(),
};

const page = () => {
  // src/**/*.html  **下面所有的*.html文件
  return src("src/*.html", { base: "src" })
    .pipe(
      plugins.swig({
        data,
        defaults: {
          //  可能会因为swig模板引擎缓存机制导致页面不变化 所以修改为false   不缓存
          cache: false,
        },
      })
    )
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true })); //自动以流的方式推送到浏览器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 clean = () => {
  // del方法返回的是pormise   会标记任务结束
  return del(["dist", "temp"]);
};

// 创建服务器的相关配置
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/styles/*.scss", "src/assets/scripts/*.js", "src/*.html"],
    bs.reload
  ); //优化上面写法
  bs.init({
    notify: false, //浏览器右上角提示
    port: 2021, //端口
    // open:false,//是否自动打开浏览器
    //当什么文件发生变化时候刷新页面  为路径
    // 当.pipe(bs.reload({stream:true})); 存在可以省略files
    // files: "dist/**",
    server: {
      baseDir: ["temp", "src", "public"],
      routes: {
        "/node_modules": "node_modules", //映射里面引用的node_module里面js等css的引用
      },
    },
  });
};

// 文件引用处理
const useref = () => {
  return (
    src("temp/*.html", { base: "dist" })
      .pipe(plugins.useref({ searchPath: ["dist", "."] }))
      //判断是否为html js  css
      .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 develop = series(compile, serve); //先进性编译样式脚本页面，然后在启动服务器

// 上线之前执行的任务
const build = series(
  clean,
  parallel(series(compile, useref), image, font, extra)
);

module.exports = {
  clean,
  build,
  develop,
};

总结--流程

安装并且引入gulp       yarn add gulp
安装并且引入gulp-sass  yarn add gulp-sass sass --dev    用于转换sass
安装并且引入babel      yarn add gulp-babel @babel/core @babel/preset-env --dev    用于编译js
安装并且引入swig       yarn add gulp-swig --dev    用于页面模板编译
安装并且引入imagemin   yarn add gulp-imagemin@7 --dev   用于压缩图片svg
安装并引入del          yarn add del --dev    用于清空删除
安装并引用自动加载插件  yarn add gulp-load-plugins --dev    替换之前引入的sass 为plugins.sass 等
安装一个服务器插件      yarn add browser-sync --dev   用于创建启动一个服务器
安装一个useref文件处理器         yarn add gulp-useref --dev 
下载压缩html   js   css   插件  yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev  
判断文件类型的插件               yarn add gulp-if --dev  

最终整理组合任务为  清空clean   启动服务器develop   打包 build 

运行分别方式为 yarn gulp clean
运行方式为 yarn gulp develop
运行方式为 yarn gulp build

可以配置package.json 的scripts为

    "clean": "gulp clean",
    "build": "gulp build",
    "develop": "gulp develop",

后运行方式分别为 yarn clean
后运行方式分别为 yarn develop
后运行方式分别为 yarn build

相关文章

  • 自动化构建02

    常用的自动化构建工具 Grunt Gulp FIS Grunt Grunt标记任务失败 Grunt 配置方法 G...

  • 从0构建自动化测试平台(五)兼容性测试实现

    往期文章 从0构建自动化测试平台(一)之技术选型 从0构建自动化测试平台(二)WEB服务器构建 从0构建自动化测试...

  • gulp

    1 gulp(自动化构建工具) 自动化构建 自动化构建:优化网站,提升网站性能,提高网站的代码,文件的优化处理 处...

  • 持续交付-发布可靠软件的系统方法阅读记录

    1、尽可能的自动化 自动化构建 自动化配置 自动化部署（热部署） 自动化测试 通过许多次的构建、配置、测试，从而对...

  • gulp

    叫做前端自动化构建工具,此类工具还有:grunt前端自动化构建工具 是什么?答: 自动化 less sass ...

  • Gradle自动化构建之自定义任务

    Gradle自动化构建之自定义任务 GitHub地址 Gradle自动化构建ProtocolBuffer 最近在看...

  • Jenkins自动化构建-02

    Jenkins构建任务 linux jar windows war

  • jenkins自动化构建配置

    背景 jenkins自动化构建gitlab项目 gradle或maven多模块项目在自动化构建时希望每个模块独立部...

  • 从零开始认识自动化构建

    我们日常开发自动化构建伴随着我们从开发到上线，那么自动化构建到底是个什么东西？自动化构建使开发者尽可能脱离运行环境...

  • Gradle完全解析

    导语： Gradle是一个基于groovy语言的自动化构建工具，提供了一个自动化构建任务的框架，具体构建过程支持自...

网友评论

    本文标题：自动化构建02

    本文链接：https://www.haomeiwen.com/subject/yjjxeltx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    大前端

    关于我们|服务条款|联系我们|自动化构建02|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！