前端构建工具的用法—grunt、gulp、browserify、webpack

随着前端项目的飞速发展,项目越来越大、文件越来越多,前端工程化的工具也越来越多。下面介绍目前最流行的四种构建工具——grunt、gulp、browserify、webpack

所有的构建工具都是基于NodeJs和Npm,所以使用下面任何工具都需要安装Node

一、grunt

1、需要两个文件:

Gruntfile.js —— grunt执行任务文件:描述项目会执行的任务。

package.json —— 工程描述文件:描述项目基本信息,和项目中使用到的npm包信息,方便其他人了解项目信息、跑起来该项目。

2、安装grunt-cli命令环境和项目里面用到的grunt包

npm install grunt-cli -g

mac下面需要sudo:sudo npm install grunt-cli -g

npm install grunt --save-dev  // --save-dev:表示该npm包在dev开发环境时需要用到,加这个会在package.json中自动增加相关包描述。

3、安装grunt任务相关的npm包

npm install xxx --save-dev

4、Gruntfile.js任务写法

module.exports = function(grunt){
    // 加载需要的任务包
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 初始化任务
    grunt.initConfig({
        "less": {  //包名
            "a":{  //任务名
                "src": "a.less",
                "dest": "index.css"
            },
            "b":{
                "src": "b.less",
                "dest": "main.css"
            }
        },
        "uglify": {
            "a": {
                "src": "aa.js",
                "dest": "index.js"
            }
        }
    });

   // 注册多任务
   grunt.registerTask('abc', ['less:a', 'uglify']);

}

 总结:最早开始自动化构建前端项目的工具之一,极大提高前端开发过程中的开发效率、更加方便工程化的部署到线上以及优化了线上前端代码。

二、gulp

1、需要两个文件:

gulpfile.js —— gulp执行任务文件:描述项目会执行的任务。

package.json —— 工程描述文件:描述项目基本信息,和项目中使用到的npm包信息,方便其他人了解项目信息、跑起来该项目。

2、安装gulp-cli命令环境和项目里面用到的gulp包

npm install gulp-cli -g

mac下面安装全局包都需要sudo一下:sudo npm install gulp-cli -g

npm install gulp --save-dev  // --save-dev:表示该npm包在dev开发环境时需要用到,加这个会在package.json中自动增加相关包描述。

3、安装gulp任务相关的npm包

npm install xxx --save-dev

4、gulpfile.js任务写法

// 引用需要的包
const gulp = require('gulp'); const less = require('gulp-less'); const uglify = require('gulp-uglify'); gulp.task('less:a', function(){ gulp.src('a.less').pipe(less()).pipe(gulp.dest('css')); }); gulp.task('uglify:a', function(){ gulp.src('a.js').pipe(uglify()).pipe(gulp.dest('js')); }); // 注册多任务,默认任务用 default gulp.task('abc', ['less:a', 'uglify:a']);

 优点:1、执行任务比grunt快(原因:读取二进制流通过pipe执行)2、写法上更优雅、简洁、清晰 

三、browserify

使用目的:

1、用作模块化(跟requireJs、seaJs类似作用)

2、构建化构建打包工作

3、可以使用node中的一些内置模块如querystring、path、util等,提高工作效率

使用方法: 

1、安装browserify-cli命令环境和项目中用到的browserify包

npm install -g browserify-cli 

npm install browserify --save-dev

2、项目中自己编写的模块,通过 modules.exports 或  export 抛出去,如:

// sum.js
module.exports = function (sum1, sum2){
    return sum1+sum2;
}

引用时通过 require('./sum') 来使用,如:

// index.js
var sum = require('./sum.js');
var querystring = require('querystring');

var parse = "a=1&b=2&c=2";
console.log(querystring.parse(parse));

console.log(sum(11, 12));

注意:使用node内置模块或者通过npm下载的包,直接 require('querystring') 即可。但如果是自己编写的模块,需要加 ./  ,require('./sum')

3、编译

// 通过browserify命令,将index.js编译成bundle.js
browserify index.js -o bundle.js

4、如果需要 项目自动编译,需要安装 全局watchify这个包

npm install -g watchify

执行时,就不用browserify命令,用watchify命令

watchify index.js -o bundle.js

四、webpack

webpack是近来最火的工程化构建工具,为什么这么火?是因为在webpack中  “一切皆模块” !

最大的优点也就在这:js、css、less、sass、json、coffer、image、...... 各种类型文件都可以通过loader来处理打包。

1、安装webpack-cli命令环境和项目用刀到的webpack包

npm install -g webpack-cli
npm install webpack --save-dev

2、跟browserify第二步一样,module.export抛出自定义模块,require来模块化引用

3、编译打包

// 跟browserify区别是 没有 -o
webpack index.js bundle.js
// -w:监视 -p:压缩代码
webpack -w -p index.js bundle.js

4、打包less、sass、image等

  1)安装使用的loader的安装包

// 同时安装多个包,可以用 空格 分开
npm install less-loader css-loader style-loader --save-dev

  2)引用less包等

// index.js
require('style-loader!css-loader!less-loader!./less/index.less');
// 或者省去loader简写成:
require('style!css!less!./less/index.less');

如果每个文件的loader都这么写的话,太麻烦,可以在webpack的配置文件作配置

5、配置文件名:webpack.config.js

// webpack.config.js
module.exports = {
    module: {
        loaders: [
            // less结尾的文件,使用style、css、less三种loader处理
            // 用!连接loader
            { test: /\.less$/, loader: 'style!css!less'}
        ]
    }
};

此时的index.js入口文件引用index.less

require('./less/index.less');

6、配置文件可以配置入口、输出等

module.exports = {
    entry: "./index.js", // 入口文件
    output: {
        filename: 'bundle.js' // 出口文件名
    },
    module: {
        loaders: [
            { test: /\.less$/, loader: 'style!css!less'}
        ]
    }
};

7、如果我们要修改完文件后,自动编译、同时刷新浏览器怎么做?

  1)安装webpack-dev-server 全局包 和webpack-dev-server 项目包

npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev

  2)此时需要使用webpack中另外一个强大的功能——插件,plugins,在配置文件中配置

// 引用webpack
var webpack = require('webpack');

module.exports = {
    entry: "./index.js", // 入口文件
    output: {
        filename: 'bundle.js' // 出口文件名
    },
    plugins: [
        // 自动刷新浏览器用到的插件
        new webpack.DefinePlugin({
            'process.env.NODE.ENV':"development"
        })
    ],
    module: {
        loaders: [
            { test: /\.less$/, loader: 'style!css!less'}
        ]
    }
};

  3)执行编译

// --inline:表示实时编译
webpack-dev-server --inline

8、如果想把命令写的更简单,可以在package.json的script属性中配置

  1)如何生成package.json文件

// init 命令让你一步步选择、填写安装工程文件的描述
npm init

// 或者一步到位
npm init --yes

  2)配置script属性

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "css-loader": "^0.25.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2"
  },
  "devDependencies": {
    "webpack-dev-server": "^1.15.1"
  },
  "scripts": {
    "dev": "webpack-dev-server --inline"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

  此时,执行变成 

npm run dev

  是不是更简单了,而且在script里面可以方便做多种环境下的配置命令。

  

以上就是这几种构建工具的基本使用方法,希望大家工作过程中,尽量使用,去体会它在提高效率的同时带给我们编程的快乐感觉!

 

转载于:https://www.cnblogs.com/souyidai/p/util_1.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值