問題描述
如何使用諸如 Google Chrome 調試器之類的調試器來調試在我的 gulpfile.js 中定義的 gulp 任務，逐行執行任務的代碼?
How do I debug a gulp task defined in my gulpfile.js with a debugger such as the Google Chrome debugger, stepping through the task's code line by line?
推薦答案
使用 Node.js 6.3+ 版本，您可以使用 --inspect flag 在運行你的任務時.
With Node.js version 6.3+ you can use the --inspect flag when running your task.
調試名為 css 的 gulp 任務:
To debug a gulp task named css:
找出你的 gulp 可執行文件在哪里.如果 gulp 安裝在本地，它將位于
node_modules/.bin/gulp.如果 gulp 已全局安裝，請在終端中運行which gulp(Linux/Mac) 或where gulp(Windows) 以找到它.
Find out where your gulp executable lives. If gulp is installed locally, this will be at
node_modules/.bin/gulp. If gulp is installed globally, runwhich gulp(Linux/Mac) orwhere gulp(Windows) in a terminal to find it.
根據您的 Node.js 版本運行這些命令之一.如果需要，請將 ./node_modules/.bin/gulp 替換為步驟 1 中 gulp 安裝的路徑.
Run one of these commands according to your version of Node.js. If required, replace ./node_modules/.bin/gulp with the path to your gulp installation from step 1.
- Node.js 6.3+:
node --inspect --debug-brk ./node_modules/.bin/gulp css - Node.js 7+:
node --inspect-brk ./node_modules/.bin/gulp css
使用 Chrome 瀏覽到 chrome://inspect.
Use Chrome to browse to chrome://inspect.
--debug-brk (Node.js 6.3+) 和 --inspect-brk (Node.js 7+) 標志用于暫停代碼執行在任務的第一行代碼上.這讓您有機會在任務完成之前打開 Chrome 調試器并設置斷點.
The --debug-brk (Node.js 6.3+) and --inspect-brk (Node.js 7+) flags are used to pause code execution on the first line of code of your task. This gives you a chance to open up the Chrome debugger and set breakpoints before the task finishes.
如果您不希望調試器在第一行代碼處暫停，只需使用 --inspect 標志.
If you don't want the debugger to pause on first line of code, just use the --inspect flag.
您還可以安裝 Node.js Inspector Manager (NIM) Chrome 擴展以幫助完成第 3 步.這將自動打開一個 Chrome 選項卡，調試器已準備就緒，作為手動瀏覽 URL 的替代方法.
You can also install the Node.js Inspector Manager (NIM) extension for Chrome to help with step 3. This will automatically open up a Chrome tab with the debugger ready to go, as an alternative to manually browsing to a URL.
這篇關于如何調試 Gulp 任務?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！