前端构建工具的用法—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

前端构建工具的用法—grunt、gulp、browserify、webpack相关推荐

前端构建工具大盘点：gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc
文章目录背景分类转译器打包器对比 gulp VS webpack Bundle vs Bundleless(代表就是webpack VS vite) 其他比较个人理解总结官网背景做前 ...
Gulp.js—比Grunt更易用的前端构建工具-前端自动化
Gulp.js-比Grunt更易用的前端构建工具 Grunt是目前最流行的前端构建工具,对前端的效率帮助非常大,但Grunt并非完美无缺,json描述任务的方式,显得过于繁琐和不够简单,对于新手来说, ...
前端构建工具Gulp的学习和使用
前几天刚鼓捣了Grunt的使用,结果文档还没捂热,老大说我们还是用gulp吧,搞得我又得来整gulp,眼泪流成河了,真是不晓得底层人民的辛苦啊.不过经过对gulp的学习,发现很好用,比grunt舒服! ...
前端构建工具gulp之基本介绍
1.基本介绍 gulp.js是一个自动化构建工具,是自动化项目的构建利器.可以对网站的资源进行优化,将开发过程中一些重复的任务通过执行命令自动完成.这样能很大的提高我们的工作效率. gulp.js是基 ...
前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
前端构建工具gulp的详细介绍以及使用
什么是 gulp 为什么要用 gulp 如何使用 gulp Installing Gulp Install the gulp command Install gulp in your devDepen ...
前端构建工具-gulp ！（解决浏览器缓存问题）
一,为啥要用构建工具项目中的js和css属于静态文件,客户端第一次访问的时候会缓存这些文件,那就意味着当我们需要改js跟css的时候,即使我们将文件中的代码改了重新发布,那么客户端也是看不到,客户端 ...
55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
前端构建工具gulpjs的使用介绍及技巧（转）
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

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

前端构建工具的用法—grunt、gulp、browserify、webpack相关推荐

最新文章

热门文章