五项艰巨的任务，您会想念的！

使用五个基本的grunt任务

简化前端工作流程

流行的任务跑步者

Grunt大大简化了重复的前端开发任务。本文重点介绍了五个强大的Grunt插件，可提高效率和代码质量。 尽管存在其他任务跑步者（有关详细信息，请参见我们的《 Gulp.js简介》），但Grunt广泛的插件生态系统仍然是宝贵的资产。 新手咕unt？查看“用咕unt自动重复执行的任务”或官方咕unt入门指南。

>

钥匙要点：

• grunt-autoprefixer：自动化供应商在CSS中的前缀，消除了添加浏览器兼容性前缀的繁琐的手动过程。
• grunt-uncss：删除未使用的CSS，减少文件大小并改善页面加载时间。 注意其局限性：它不会通过JavaScript或用户交互动态添加的类。>
• ：>同时运行多个咕unt任务，大大减少了整体构建时间，尤其是对多核处理器的有益。 grunt-concurrent
（以前
• ）：自动将bower组件纳入您的html，在管理依赖项时节省了时间和精力。> grunt-wiredepgrunt-bower-install ：
生成自定义的现代化构建，包括项目中使用的功能，最大程度地降低了库的大小。
• 1。 grunt-modernizr：征服供应商前缀
>编写CSS通常涉及杂耍实验属性和供应商前缀。

>基于自动改装库，简化了这一点。它可以解析您的CSS，并根据我可以使用数据库添加必要的前缀。

>选项允许您指定目标浏览器和版本，仅包括所需的前缀。grunt-autoprefixer>

示例配置：

grunt-autoprefixer browsers此配置过程

，将前缀的版本输出到

>，以主要浏览器的最后两个版本为目标，加上IE 8、9和Opera 12.1。

2。

<code class="language-javascript">grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});</code>

：纤细的CSS

> 由UNCS驱动的main.cssmain-prefixed.css> >

> grunt-uncss限制：

无法通过JavaScript或用户交互动态添加CSS类。 使用

>选项（接受字面的班级名称或正则表格模式）以部分解决此问题。 复杂的选择器也可能导致错误；将它们隔离在单独的样式表中。grunt-uncss

3。 grunt-wiredep：轻松的依赖管理

> Bower（JavaScript/CSS依赖管理器）需要手动将组件包含在您的HTML中。 grunt-wiredep>自动化这个，根据您的配置注入依赖项。

>

基本配置：

<code class="language-javascript">grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});</code>

这将依赖项注入index.html>。 运行grunt-wiredep后，您的HTML将包括以下几行，例如以下线

4。

：优化现代化grunt-modernizr

> ModernIzr有助于检测浏览器对现代功能的支持。

>创建自定义的现代化构建，其中包括您的项目使用的功能，从而产生较小，更高效的库。 grunt-modernizr>示例配置：

5。

<code class="language-javascript">grunt.initConfig({
  wiredep: {
    app: {
      src: ['index.html']
    }
  }
});</code>

：速度的并行处理

> grunt-concurrent对于具有许多任务的项目，

同时运行它们，可显着加快构建过程，尤其是在功能强大的机器上。

grunt-concurrent>示例：

这是在

<code class="language-javascript">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']
      }
    }
  }
});</code>

>任务下同时运行的

>> copy，autoprefixer>和test>在concat>任务下同时。 uncss>此选择为增强基于咕unt的工作流程提供了坚实的基础。 探索庞大的咕unt插件生态系统，以发现更多的工具来简化您的开发过程。

以上是五项艰巨的任务，您会想念的！的详细内容。更多信息请关注PHP中文网其他相关文章！