用咕unt编写一个很棒的构建脚本

本指南演示了如何为现代Web项目配置强大的构建系统Grunt。 完成后，您的GruntFile将自动化任务，包括：文件复制，构建清理，带有供应商前缀，CoffeeScript编译，CSS和JavaScript Minification，Jade Compilation，Jade Compilation，对源更改的自动重建和本地开发服务器的自动重建服务器。

键概念

• > grunt设置： install node.js，npm和grunt cli。 将您的项目初始化为NPM软件包，定义中的依赖项来管理Grunt插件。package.json
• 任务配置：使用定义任务（例如，文件复制，清洁，STYLUS/COFFEESCRIPT/JADE汇编）。 子任务允许在单个任务中进行多个配置。grunt.initConfig
• >自动化与优化： 杠杆插件（例如AutoPreeFixer（CSS供应商前缀），uglifyjs（JavaScript Minifie）（JavaScript Minification）和CSSMIN（CSS Compression）以增强性能。
>
• 开发工作流程：>实现用于自动重建源更改，而对于网络访问的开发服务器。 grunt-contrib-watch>grunt-contrib-connect自定义任务：
通过
• 创建自定义任务（例如，清洁，编译，复制），促进模块化和可维护性。 grunt.registerTask入门

> install node.js和npm。在全球安装GRUNT CLI：。使用以下内容创建一个>文件：

>

npm install -g grunt-cli这定义了您的项目及其依赖性。 运行package.json以安装它们。

<code class="language-json">{
  "name": "grunt_tutorial",
  "description": "Grunt setup for web development.",
  "author": "Landon Schropp (http://landonschropp.com)",
  "dependencies": {
    "grunt": "0.x.x",
    "grunt-autoprefixer": "0.2.x",
    "grunt-contrib-clean": "0.5.x",
    "grunt-contrib-coffee": "0.7.x",
    "grunt-contrib-connect": "0.4.x",
    "grunt-contrib-copy": "0.4.x",
    "grunt-contrib-cssmin": "0.6.x",
    "grunt-contrib-jade": "0.8.x",
    "grunt-contrib-jshint": "0.6.x",
    "grunt-contrib-stylus": "0.8.x",
    "grunt-contrib-uglify": "0.2.x",
    "grunt-contrib-watch": "0.5.x"
  },
  "engine": "node >= 0.10"
}</code>

>文件复制并构建清理npm install

>

>分别维护源代码并分别构建文件。 创建一个：

这将文件从Gruntfile.js>复制到

>并清洁

<code class="language-javascript">module.exports = function(grunt) {
  grunt.initConfig({
    copy: {
      build: {
        cwd: 'source',
        src: [ '**', '!**/*.styl', '!**/*.coffee', '!**/*.jade' ], // Exclude compiled files
        dest: 'build',
        expand: true
      },
    },
    clean: {
      build: { src: [ 'build' ] },
      stylesheets: { src: [ 'build/**/*.css', '!build/application.css' ] },
      scripts: { src: [ 'build/**/*.js', '!build/application.js' ] },
    },
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('build', ['clean:build', 'copy']);
};</code>

>目录。 运行

。source buildbuild（其余部分详细介绍了手写笔，自动改装器，CSS Minification，Coffeescript，uglify，Jade，Watch和Developption Server将遵循代码片段和解释的类似结构为了释义，我在这里省略了核心概念。相同。）grunt build

结论

>该简化的指南为构建强大而有效的基于咕unt的构建过程奠定了基础。 探索庞大的Grunt插件生态系统以进一步自定义您的工作流程。>

以上是用咕unt编写一个很棒的构建脚本的详细内容。更多信息请关注PHP中文网其他相关文章！