工作 构建工具 整理

Posted 2020-10-23 xiaxiaodong

前端的工作中会用到各种基于Node的构建工具，现在我们就来一起比较一下各种构建工具的优劣。

　　上一篇我们安装的Node环境，但是国内下载一些npm库速度不是很快，多亏了淘宝的程序员推出了cnpm（国内的镜像，具体使用时将npm换成cnpm）

 

构建工具的全局命令行实现原理：

　　npm会在环境变量（在我的电脑右键 属性 --> 高级系统设置 --> 环境变量） path 中添加 npm全局安装包的路径，

　　npm安装全局包的时候会检查 项目中 package.json的bin属性，

　　之后会在npm路径中创建一个可执行文件( 比如 grunt ，grunt.cmd )来执行对应的指令

 

npm的依赖文件在package.json中

 

Grunt篇

　　官网   中文网

　　安装全局的grunt命令行支持

　　　　npm i grunt-cli -g

　　安装本地grunt

　　　　npm install grunt --save-dev

　　API：

　　　　grunt.initConfig 配置插件参数

　　　　grunt.loadNpmTasks 加载相应的插件本地依赖包

　　　　grunt.registerTask 注册任务

　　Gruntfile.js编写

　　　　

//node的模块管理
module.exports = function(grunt) {

  //配置任务数据
  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),
    uglify: {
      options: {
        banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
      },
      build: {
        src: ‘src/<%= pkg.name %>.js‘,
        dest: ‘build/<%= pkg.name %>.min.js‘
      }
    }
  });

  // 加载包含 "uglify" 任务的插件。 相当于 require 相应包的过程
  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

  // 默认被执行的任务列表。 注册相应的任务
  grunt.registerTask(‘default‘, [‘uglify‘]);

};