yytext 行艰巨_5个您不想错过的艰巨任务！

yytext 行艰巨

除非您过去几个月一直生活在一块石头上，否则您肯定已经听说过Grunt或其他类似Gulp.js发行的任务运行程序（有关更多信息，请参见我们的文章An Gulp.js简介 ）。 这一系列工具已席卷了前端，掀起了数千名开发人员处理诸如级联，缩小，图像优化等繁琐活动的方式。

如果您不熟悉任务运行器领域，尤其是对Grunt尚不熟悉，则可以参考文章使用Grunt自动执行重复任务或Grunt入门指南 。

在本文中，我将向您展示五个您不想错过的Grunt任务（有时称为Grunt插件）！

咕unt声自动前缀

如果您最近花了一些时间编写CSS，那么您就会知道我们必须处理许多实验性属性和供应商前缀。 这项活动非常痛苦，以至于它可以帮助网站如Can I Use和CSS3 Please取得成功。 多亏了grunt-autoprefixer，这项活动才不再那么麻烦。

grunt-autoprefixer是基于Autoprefixer库的一项任务，该库解析CSS并添加供应商前缀CSS属性。 确定属性是否需要一个或多个前缀的数据是从“ 我可以使用”数据库中提取的。 在grunt-autoprefixer中，我们可以指定几个选项，但是最重要的一个肯定是browsers 。 后者接受一组值，这些值使我们可以指定我们在项目中定位的浏览器和版本。 目的是仅添加我们真正需要的前缀，以便我们CSS尽可能轻巧。

下面显示了此任务的基本配置示例。 在此配置中，我们指定了一个名为main.css的文件进行解析。 输出被写入名为“ main-prefixed.css”的文件。 此外，输出将包含所支持的每个浏览器的最后两个版本的前缀，以及Internet Explorer 8，Internet Explorer 9和Opera 12.1（使用Presto引擎的最新版本）的前缀。

grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 version', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});

咕unt声

在谈论CSS时，让我们看一下grunt-uncss 。 这项由Uny出色的Addy Osmani开发的基于UnCSS的任务将从项目中删除未使用CSS。 当在项目中使用CSS框架时，此任务特别有用，因为我们不太可能使用框架的所有组件。 使用grunt-uncss可以减少最终CSS文件的大小，从而缩短下载时间。

不幸的是，UnCSS模块有两个重要的局限性，体现在grunt-uncss中。 第一个是UnCSS无法识别在运行时通过JavaScript或用户交互（通过悬停，单击等）添加CSS类。 我们可以通过在希望ignore的选项中指定我们不想删除的类来部分解决此问题，该选项同时接受文字名称和正则表达式模式。 第二个问题是解析器无法使用复杂的选择器。 发生这种情况时，将引发错误。 修复此错误的最佳方法是将有问题的选择器移动到解析器不会处理的单独样式表。

下图取自官方存储库，并显示了正在执行的任务。

grunt-wiredep（以前称为grunt-bower-install）

在Bower和yo（构成Yeoman工作流程的帮助）的帮助下，Grunt的名气不断增长。 Bower是JavaScript和CSS的依赖项管理器。 如果您曾经使用过它，那么您将知道下载后，我们必须在主HTML文件中手动添加项目的组件。 如果我们有多个依赖关系，这可能是一件繁琐的工作。 对我们来说幸运的是，我们可以使用一个名为Grunt-wiredep（ 以前称为grunt-bower-install ）的Grunt任务。 grunt-wiredep找到我们项目的组件，并根据我们的设置将其注入我们的源代码中。

此任务的基本配置如下：

grunt.initConfig({
  wiredep: {
    app: {
      src: [
        'index.html'
      ]
    }
  }
});

有了此配置后，要管理项目JavaScript依赖关系，我们必须将此代码放在主HTML文件中（上面的代码后面为index.html ）：

<!-- bower:js -->
<!-- endbower -->

现在，每次我们要注入或更新依赖项时，我们只需运行命令grunt-widep 。 该命令的结果将生成如下结果：

<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<!-- endbower -->

现代主义

在谈论grunt-autoprefixer时，我们提到了CSS中实验性功能的概念。 当我们想使用现代JavaScript功能时，我们需要测试浏览器以检查其是否支持给定功能。 为了实现此任务（还要测试CSS实验属性），我们可以使用的最佳库是Modernizr 。 grunt-modernizr是基于Modernizr的一项任务，它解析我们项目的文件，以搜索对Modernizr的引用。 然后，它输出仅包含正在使用的功能的库的缩小版本。 这个过程使我们可以进一步减轻项目的负担。

grunt-modernizr 可通过其提供的许多选项进行大量自定义 。 以下是一个非常基本的配置示例：

grunt.initConfig({
  modernizr: {
    dist: {
      devFile: 'path/to/modernizr.js',
      outputFile: 'path/to/distribution-folder/custom-modernizr.js',
      files: {
        src: [
          'path/to/scripts/**/*.js',
          'path/to/styles/**/*.css',
        ]
      }
    }
  }
});

此配置将设置Modernizr源文件的路径以及将在其中创建自定义版本的路径。 此外，它指定文件以扫描对Modernizr的引用。 在我们的例子中，文件分别是path/to/scripts和path/to/styles文件夹中的所有.js和.css文件。

并发

如果您使用具有强大处理器的计算机，则运行Gruntfile.js的任务可能只需要几秒钟。 但是，如果该过程需要一分钟以上怎么办？ 我们如何加快这一过程？ 呼救声并发！ grunt-concurrent允许您同时运行grunt任务，从而大大缩短了构建时间。 配置示例如下所示。

grunt.initConfig({
  concurrent: {
    test: [
      'copy',
      'autoprefixer'
    ],
    build: [
      'concat',
      'uncss'
    ]
  }
});

在此示例中，我们在执行test任务时同时运行copy和autoprefixer任务，而在执行build任务时同时运行concat和uncss任务。

结论

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

在本文中，我至少向我介绍了Grunt的一些最有趣的任务。 这些任务比我们通常在项目中通常使用的基本任务（例如grunt-contrib-clean，grunt-contrib-copy和grunt-contrib-concat）的级别略高。 这绝对不是有趣任务的完整列表，因为还有很多其他有用的任务。

现在轮到你了。 您如何看待所提出的任务？ 您知道吗？ 您有喜欢和想要分享的任务吗？ 让我们开始讨论。

翻译自: https://www.sitepoint.com/five-grunt-tasks-wont-want-miss/

yytext 行艰巨