摘要：为了提高开发效率，我们的项目中可能会使用@import文件引入、stylus、sass、less之类的css预处理器。为了优化代码，可能还会压缩css。这一系列操作就导致了在开发过程中定位问题比较困难的现象。所以，我们需要一款神器来精准定位问题。而本文讲到的gulp-sourcemaps就可以帮助我们解决css、js定位的难题......

这是本站关于gulp实战技巧的第16篇文章。

一、审查元素中的假象

先来看一张截图。如图：需求把导航条的背景色改浅一点儿.png

1.1、眼见并非为实

当我们看到右侧显示header.css:1时，直觉告诉我们应该是在第1行。但究竟在不在第1行，是要考虑多种情况的。比如：
1、该css是否用过@import；
2、该css是否通过stylus、less、sass等css预处理器处理过；
3、css代码是否压缩过；
......
从上图中提供的信息来看，1、2不好直接判断。至于3，极有可能是压缩过（因为.header的行数也为1）。至于有没有压缩过，点击右侧的行数一看便之。若看到所有代码显示为一行并且Column列数很大，那就是已经压缩过了。如图：点开样式后可确定代码被压缩过.png

此时我们再点击Format（花括号）将代码进行格式化，即可看到具体行数为2。如图：点击format格式化代码可看到具体行数和列数.png

1.2、项目中没有找到header.css文件？

按常理来说，我们已经“知道了”代码所在的文件及行数，想要修改样式的话是很轻松的事情。既然是改样式，我们就直接进入项目找到对应文件进行修改吧。但可惜的是：目录中并没有发现所谓的header.css文件！如图：项目目录中没有发现header.css文件.png

怎么样，心慌了没有？？？

这里就用到了css预处理器之一的stylus，因为有后缀为.styl的文件。

1.3、header.styl中没有看到背景色？

看样子我们要成功了，那就点开这个header.styl看下代码吧。如图：打开header.styl文件后不知道如何修改.png

看官有没有再次惊呆？？？

这次我们又用到了@import + stylus定义变量的功能。

回过头来看看这一路走来，明明看似一个很简单的修改，在反向定位过程中可谓是一波三折。即使项目的作者是自己，日后修改起来也非常费时间，这还不算复杂场景！

二、神器gulp-sourcemaps 登场

那有没有解决方案呢？答案是肯定的！对于gulp项目，我们可以安装gulp-sourcemaps插件来解决代码定位难题！插件官方地址：
www.npmjs.com/package/gulp-sourcemaps

2.1、环境搭建

假设看官的电脑中已经安装了node.js环境，此时直接在任意盘符中创建一个目录即可。此处以I盘为例。进入I盘后创建一个名为demo-gulp-sourcemaps的文件夹，windows电脑中按下win + R会在左下角看到一个运行的弹窗，
接着输入cmd会按回车或点击“确定”，此时已进入命令行。然后再依次输入以下命令：
cd I:\demo-gulp-sourcemaps后回车，再输入I:并回车（进入文件夹）
npm install gulp@3.9.1 --save-dev在项目目录下安装gulp3
npm init创建项目描述文件package.json一路回车即可
npm install gulp-sourcemaps --save-dev安装gulp-sourcemaps插件。

由于这里需要复现@import、css预处理器的情况，所以我们还需要额外安装一些相关的插件。继续在cmd中输入以下命令：
npm install gulp-webserver --save-dev 自动刷新浏览器
npm install gulp-stylus --save-dev安装stylus css预处理器
npm install gulp-postcss --save-dev配合下面几个插件使用
npm install postcss-import --save-dev解决@import引入css文件
npm install cssnano --save-dev压缩css。

此时，我们的项目环境及本篇文章中要用到的插件就已经全部安装完毕了。流程图：在cmd中执行一波命令创建项目环境.png

3.2、新建页面及目录

接下来，我们还需要新建一些页面和必要的目录。大致如下：

    
demo-gulp-sourcemaps /* 目录 */
    
  node_modules /* 项目中的node包（由上面的命令自动生成） */
    
  gulpfile.js /* gulp配置文件 */
    
  package.json /* npm init命令创建的配置文件（由上面的命令自动生成） */
    
  package-lock.json（由上面的命令自动生成）
    
  assets /* 开发目录 */
    
    index.html /* 首页 */
    
    js /* js文件目录 */
    
      xxx.js /* 若干js文件 */
    
    css /* css样式表目录 */
    
      common.css /* 若干css样式表 */
    
      index.css /* 若干css样式表 */
    
      header.styl /* 页头样式 */
    
      theme.styl /* 皮肤文件 */
    
  dist /* 打包后的目录（自动生成） */
    

3.3、手动配置gulpfile.js

接下来，我们还要手动配置一个gulpfile.js文件。大致内容如下：

    
/* @Description: gulp3的配置文件 */
    
var gulp = require('gulp');
    
var sourcemaps = require('gulp-sourcemaps'); /* 映射 */
    
var webserver = require('gulp-webserver'); /* 自动刷新浏览器 */
    
var stylus = require('gulp-stylus'); /* 处理.styl文件 */
    
var postcss = require('gulp-postcss'); 
    
var postcssImport = require('postcss-import'); /* 处理@import css */
    
var cssnano = require('cssnano'); /* 压缩css */
    
var base = './assets';
    
var dist = './dist';
    
var path = {
    
  assets: {
    
    css: base + '/css/*.css',
    
    styl: base + '/css/*.styl',
    
    js: base + '/js/*.js',
    
    html: base + '/*.html'
    
  },
    
  dist: {
    
    css: dist + '/css',
    
    js: dist + '/js'
    
  }
    
}
    
/* 自动刷新浏览器 */
    
gulp.task('webserver', function () {
    
  var options = {
    
    livereload: true, /*实现自动刷新，从此不再需要手动刷新页面了*/
    
    open: true /*服务器启动时自动打开网页*/
    
  };
    
  return gulp.src(dist).pipe(webserver(options))
    
});
    
/* 压缩css及解决@import */
    
var plugins = [
    
  postcssImport(), cssnano()
    
];
    
/* stylus任务 */
    
gulp.task('styl', function () {
    
  return gulp.src(path.assets.styl)
    
    .pipe(sourcemaps.init())
    
    .pipe(stylus())
    
    .pipe(postcss(plugins))
    
    .pipe(sourcemaps.write('maps'))
    
    .pipe(gulp.dest(path.dist.css));
    
});
    
/* css任务 */
    
gulp.task('css', function () {
    
  return gulp.src(path.assets.css)
    
    .pipe(sourcemaps.init())
    
    .pipe(postcss(plugins))
    
    .pipe(sourcemaps.write('maps'))
    
    .pipe(gulp.dest(path.dist.css));
    
});
    
/* js任务 */
    
gulp.task('js', function () {
    
  return gulp.src(path.assets.js).pipe(gulp.dest(path.dist.js))
    
});
    
/* html任务 */
    
gulp.task('html', function () {
    
  return gulp.src(path.assets.html).pipe(gulp.dest(dist))
    
});
    
/* 监听 */
    
gulp.task('watch', function () {
    
  gulp.watch(path.assets.styl, ['styl']); /* styl有修改时监听 */
    
  gulp.watch(path.assets.css, ['css']); /* css有修改时监听 */
    
  gulp.watch(path.assets.js, ['js']); /* js有修改时监听 */
    
  gulp.watch(path.assets.html, ['html']); /* html有修改时监听 */
    
});
    
/* 默认任务，启动后会执行一次 */
    
gulp.task('default', ['html', 'styl', 'css', 'js', 'webserver', 'watch']);
    

注意上方黄色高亮的代码，为本篇文章的关键所在！此处刷新浏览器用了gulp-webserver插件，也可以根据项目情况使用browser-sync等插件。本站相关文章有：
gulp实战技巧之gulp-webserver自动刷新浏览器
gulp实战技巧之gulp-connect自动刷新浏览器
gulp实战技巧之gulp-connect-php+browser-sync实现自动刷新浏览器

3.4、简写html页面

准备工作已经差不多了，现在我们来愉快的写页面吧。

    
<!DOCTYPE html>
    
<html lang="en">
    
<head>
    
  <title>gulp-sourcemaps映射文件</title>
    
  <!-- 引入css样式表 start -->
    
  <link rel="stylesheet" href="./css/header.css">
    
  <link rel="stylesheet" href="./css/index.css">
    
  <!-- 引入css样式表 end -->
    
</head>
    
<body>
    
<div class="header">
    
  <div class="header__inner flex"></div>
    
    <div class="logo"></div>
    
    <ul class="nav flex">
    
      <li class="nav__item"><a href="">首页</a></li>
    
      <li class="nav__item"><a href="">资讯</a></li>
    
      <li class="nav__item"><a href="">关于我们</a></li>
    
      <li class="nav__item"><a href="">公司简介</a></li>
    
    </ul>
    
    <div class="header-foot">
    
      <a href="" class="login">登录</a>
    
      <a href="" class="register">注册</a>
    
    </div>
    
  </div>
    
</div>
    
</body>
    
</html>
    

上面代码展示的是一个网页的头部，内容有：logo、导航栏、注册/登录入口。现在我们需要写一些css来美化下，顺便进入实战阶段。由于css文件较多，此处代码就不展示了，完整代码见文章末尾。

3.5、运行gulp

接下来切换到cmd窗口，然后输入：gulp并回车。此时会自动打开浏览器，然后我们就看到了文章开头的那一幕了。

我们再来走一遍流程，看下此时的变化吧。打开审查元素模式后，可以看到此时.header对应的文件是theme.styl行数是3！如图：安装了sourcemaps后可直观看到代码对应的真实文件及具体位置.png

我们点开项目中的theme.styl文件，找到对应位置进行修改即可。由于是引用了全局变量，我们只需要修改$color__primary = #000即可做到全站换肤的功能！如图：theme.styl文件中的源码截图.png

四、demo源码

至此，本文就要结束了。demo源码已上传到了github上，如果看官需要研究源码，可以点击下面的链接进行访问并下载。

    
源码分支： dev-gulp-sourcemaps-20200530  
    

五、运行gulp后报错ReferenceError: primordials is not defined ？

若出现这个问题，参见文章《 gulp3实战技巧之利用gulp-file-include实现模板复用，大大提高开发效率！ 》末尾的解决方案。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2020-05-30/gulp-sourcemaps.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。