web开发工具

发表于 | 分类于 | | 阅读次数

模块化打包工具（Bundler）

browserify

1
2
3
4
5
6
7
//add.js
module.exports = function(x,y){
    return x+ y;
};
//test.js
var add = require('./add.js');
console.log(add(1,2));

使用browserify处理

1
browserify test.js > bundle.js

生成bundle.js就是已经处理完毕、可供浏览器使用的文件，只需要插入到script标签里即可

webpack

webpack支持AMD和CommonJS类型，
通过loader机制也可以只用ES6模块格式

任务流工具（Task Runner）

Grunt

Grunt是一个命令行工具，可以通过命令行来安装

1
npm install grunt-cli -g

  • grunt有非常完善的插件机制，插件是把各种工具和Grunt结合在一起的桥梁
  • Grunt任务的配置是通过一个名为Gruntfile.js文件来进行的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.export = function (grunt) {
    
    //自定义任务配置
    grunt.initConfig({
        jshint:{
            src:'src/test.js'
        },
        uglify:{
            
            build:{
                src:'src/test.js',
                dest:'build/test.min.js'
            }
        }
    });
    
    //将两个任务插件导入
    grunt.loadnpmTask('grunt-contrib-uglify');
    grunt.loadnpmTask('grunt-contrib-jshint');
    //注册自定义任务
    grunt.rigisterTask('default',['jshint','uglify']);
}

上面配置文件设置了3个任务，一个是jshint，一个是uglify，一个是两个任务的组合，可以在项目跟目录下通过grunt –help命令查看

Gulp

Gulp集成了grunt的优点，并推出了其他特性

1
npm install -g gulp-cli

Gulp通过gulpfile.js文件来完成任务的配置（通过流的概念来简化多个任务之间的配置和输出）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
//定义lint任务,验证代码,注意gulp采取了pipe方式,用流方式直接向下传递
gulp.task('lint',function () {
    
    return gulp.src(src/test.js)
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
//定义compress任务 压缩代码
gulp.task('compress',function () {
   
    return gulp.src('src/test.js')
        .pipe(uglify())
        .pipe(gulp.dest('buld'));
});
//将lint和compress组合起来,创建一个默认任务
gulp.task('default',['lint','compress']);

包管理（Package Manager）

安装包（npm包管理）

安装包有两种模式，一种是本地安装，一种是全局安装

例:

1
npm install lodash
  • 当命令运行行完成后会在当前目录下生成一个node_modules文件夹,并且将lodash模块下载到这个文件夹
  • 另一类模块，例如命令行工具，可以直接在命令行中使用，那么这类模块就需要全局安装
1
npm install -g jshint

安装完成后可以在命令行中直接使用该工具

例

1
jshint index.js

可以使用下面命令查看全局包安装位置

1
npm prefix -g

使用package.json

项目中有多个依赖包时，需要使用package.json

  • 以文档形式规定了项目依赖的包
  • 可以确定每个包使用的版本
  • 项目的构建可重复，在多人协作中更加方便

使用方法

创建package.json

  • 手动创建package.json
  • 执行npm init

一个package.json必须包含两个字段”name”、”version”

1
2
3
4
{
    "name":"MyProject",
    "version":"1.0.0"
}

规定项目依赖包（可以定义两种类型的依赖包）

  • dependencies:在生产环境中所需要的依赖包
  • devDependencies:仅在开发和测试环节中需要的依赖包

例如：
项目中需要依赖lodash，测试过程中需要mocha

1
2
npm install lodash --save
npm install mocha --save-dev

当然也可以手动添加至package.json文件中

1
2
3
4
5
6
7
8
9
10
{
    "name":"MyProject",
    "version":"1.0.0",
    "dependencies":{
        "lodash":"^4.12.0"
    },
    "devDependencies":{
        "mocha":"^2.4.5"
    }
}