前端工程化工具

一、Node

  1. 通过 npm 安装相应的包,可一次性安装多个包
    npm install 参数(可选,--global、--save-dev) 包名(grunt、bower、yo等)
    npm install 如果不加包名,则下载安装 package.json 文件中的依赖包

    --global 作用:告诉npm我们安装的包不是项目层面的,而是系统全局层面的。其实,这么做是为了直接在命令行中使用安装的包。
    --save-dev 作用:告诉npm把这个包添加到清单文件package.json中,并将其标记为开发依赖。最好把无需在生产服务器中使用的依赖标记为开发依赖,这是最佳实践。

  2. 将项目初始化为node结构
    npm init

二、Grunt

  1. 通过 npm 全局安装grunt-cli
    npm install --global grunt-cli
  2. 查看 grunt 版本
    grunt --version(或-V)
  3. grunt的常用方法
    配置Grunt前,要先创建Gruntfile.js文件。所有构件任务的配置和定义都保存在这个文件中。
    1.grunt.initConfig() 该方法的参数是一个对象,这个参数是所有任务和目标的配置。这个配置对象中的顶层属性代表了针对某个特定任务的配置。
    2.grunt.loadNpmTasks() 该方法告诉Grunt加载指定Grunt插件中的所有任务。
    3.grunt.registerTask() 该方法可以定义任务别名,其参数是一个任务名和一个数组,数组中的元素是要执行的任务。
    4.grunt.registerMultiTask() 该方法定义多个任务。

  4. 相关插件 (grunt-contrib-XXX 形式的插件为grunt官方提供的)

    1. load-grunt-tasks 加载所有的grunt task
    2. time-grunt grunt任务执行的时间进度插件
    3. grunt-contrib-copy 拷贝文件
    4. grunt-contrib-clean 删除文件
    5. grunt-contrib-uglify 压缩文件
    6. grunt-contrib-concat 合并文件
    7. grunt-contrib-jshint jshint代码检查
    8. grunt-contrib-less less文件编译
    9. grunt-contrib-imagemin 图像压缩(有损压缩)
    10. grunt-contrib-watch 监视文件的修改,自动启动任务
    11. grunt-spritemith icons生成sprite图
    12. grunt-rev 对文件进行hash命名
    13. grunt-usemin 对文件的引用路径更新
    14. grunt-nodemon 监视整个node应用,自动重启服务
    15. grunt-concurrent 对watch和nodemon同时开启
// Gruntfile.js 示例

module.exports = function (grunt) {
    grunt.initConfig({
        jshint: {
            browser: ['public/js/**/*.js']
        },
        cssmin: {
            all: {
                files: { 'build/css/all.min.css': ['public/css/**/*.css'] }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', ['jshint']);
    grunt.registerTask('build', ['cssmin']);
};

三、yoman

  1. 安装yoman

    npm install -g yo
  2. yoman相关脚手架

    npm install -g 脚手架名

    Angular => generator-angular

  3. 通过脚手架生成相关项目

    yo 项目名

四、bower

  1. 安装bower

    npm install -g bower
  2. bower 安装相关库

    bower install 包名
    // 包名有以下几种形式
    // bower中注册的框架名(jquery)
    // github上的短写形式(jquery/jquery)
    // github上的项目地址(https://github.com/jquery/jquery.git)
    // url安装路径(http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js)
  3. bower初始化一个bower项目,生成bower.json文件

    bower init
  4. d

五、gulp

六、grunt、gulp、npm三者之间的区别、优缺点

Grunt:这是本书使用的构建工具,由配置驱动。
npm:一种包管理器,也可以当作构建工具。
Gulp:介于Grunt和npm之间的构建工具,由代码驱动。

Grunt的优缺点概览
Grunt有以下优点
❑ 有成千上万个插件,几乎任何操作都有相应的插件;
❑ 配置易于理解、易于调整;
❑ 只需知道JavaScript基础知识;
❑ 支持跨平台开发,甚至支持Windows;
❑ 适合大多数团队使用。
Grunt有以下缺点
❑ 基于配置的构建定义方式在构建流程变复杂时显得不灵便;
❑ 如果很多任务中有多个目标,那就很难理解构建过程;
❑ Grunt比其他构建工具速度要慢。

Node的优缺点概览
Node有以下优点
❑ 不受Grunt插件的限制,可以充分利用npm中成千上万的包。
❑ 除了用来管理依赖的工具npm与列出依赖和设置构建命令的清单文件package.json之外,不需要任何其他的CLI工具和文件。 npm能直接运行CLI工具和Bash命令,所以性能比Grunt好。
Node有以下缺点
npm最大的缺点或许是, Bash在Windows环境中无法顺畅使用。

Gulp的优缺点概览
Gulp有以下优点
❑ 插件的质量都很高;
❑ 代码驱动的Gulpfile.js文件比配置驱动的Gruntfile.js文件更易于理解;
❑ 速度比Grunt快,因为Gulp使用流式管道,不会每次都读写硬盘;
❑ 和Grunt一样,支持跨平台开发。
Gulp有以下缺点
❑ 如果没有使用Node的经验,可能很难学;
❑ 很难开发高质量的插件,原因同上;
❑ 团队的所有成员(现有成员和未来加入的成员)都要认同流和异步代码;
❑ 任务依赖系统还有很多不尽如人意的地方。

Grunt和Gulp的主要区别在于, Gulp异步执行各个任务,而Grunt同步执行各个任务。如果想在Gulp中同步执行任务,要把其他任务声明为这个任务的依赖,然后再定义这个任务。执行这个任务时, Gulp会先执行依赖的任务。

你可能感兴趣的:(相关软件工具)