码迷,mamicode.com
首页 > 其他好文 > 详细

工作 构建工具 整理

时间:2018-02-05 16:02:06      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:nod   targe   efault   UI   比较   node   temp   mod   ack   

前端的工作中会用到各种基于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‘]);

};

 

工作 构建工具 整理

标签:nod   targe   efault   UI   比较   node   temp   mod   ack   

原文地址:https://www.cnblogs.com/xiaxiaodong/p/8417772.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!