什么是 gulp-linenum？
gulp-linenum 是一个 gulp 插件，用于给代码添加行号。在前端开发过程中，经常需要查看代码行号，尤其在调试时更是如此。手动添加行号费时费力，而使用 gulp-linenum 可以自动给代码添加行号，并且支持自定义格式和样式，大大提高了开发效率。
如何安装 gulp-linenum？
首先需要确保已安装 gulp，如果未安装，请执行以下命令：
npm install -g gulp
接着，就可以安装 gulp-linenum 了。执行以下命令即可：
npm install --save-dev gulp-linenum
如何使用 gulp-linenum？
假设有以下代码：
function helloWorld() {
console.log('Hello, World!');
}要使用 gulp-linenum 给代码添加行号，只需要在 gulpfile.js 中添加以下代码：
const gulp = require('gulp');
const linenum = require('gulp-linenum');
gulp.task('addLineNum', function () {
return gulp.src('src/*.js')
.pipe(linenum())
.pipe(gulp.dest('dist/'));
});运行 $ gulp addLineNum 命令即可自动给 src/ 目录下的所有 .js 文件添加行号，并且生成到 dist/ 目录下。
如果要指定添加行号的格式，可以在 linenum() 中传入一个对象，例如：
.pipe(linenum({
prefix: '',
format: ' /* line $1 */',
start: 1
}))- prefix: 行号前缀，默认为空，例如可以设置为 'line '。
- format: 行号格式，默认为 '/* line $1 */'，其中 $1 表示行号。
- start: 起始行号，默认为 1。
假设使用以下代码：
-- -------------------- ---- -------
----------------------- -------- -- -
------ --------------------
---------------
------- ----- --
------- --- -- ----
------ ---
---
--------------------------
---则会得到以下代码：
line 100 /* function helloWorld() { */
line 101 /* console.log('Hello, World!'); */
line 102 /* } */总结
使用 gulp-linenum 可以自动给代码添加行号，大大提高了前端开发效率。在使用过程中，可以根据实际需求自定义行号格式和样式，以满足不同项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72335