Question

我正在查看一些示例grunt文件，试图了解如何使用它。

根据我的理解，这些是插件但是每个人都做了什么？

concat
jshint
less
uglify
copy
clean

Answer 1

这是一个用coffeescript编写的Gruntfile示例，我将其用作大多数角度应用程序的基本支架，它使用了大部分这些任务，可以查看以供参考：

module.exports = (grunt) ->

  # show elapsed time at the end
  require("time-grunt") grunt

  # load all grunt tasks
  require("load-grunt-tasks") grunt

  config =
    source: "src"
    test: "tests"
    build: ".tmp" 
    output: "public"

  sources =
    vendor: [
      "<%= bower.directory %>/lodash/dist/lodash.min.js"
      "<%= bower.directory %>/jquery/dist/jquery.min.js"          
      "<%= bower.directory %>/bootstrap/dist/js/bootstrap.min.js"
      "<%= bower.directory %>/angular/angular.min.js"
    ]  

  grunt.initConfig
    application: config
    bower: grunt.file.readJSON('.bowerrc')

    clean:
      build:
        files: [
          dot: true
          src: ["<%= application.build %>", "<%= application.output %>/*", "!<%= application.output %>/.git*"]
        ]

    coffee:
      build:
        files: [
          expand: true
          cwd: "<%= application.source %>/coffee"
          src: "**/*.coffee"
          dest: "<%= application.build %>/scripts"
          ext: ".js"
        ]

      test:
        files: [
          expand: true
          cwd: "<%= application.test %>"
          src: "**/*.coffee"
          dest: "<%= application.build %>/tests"
          ext: ".js"
        ]

      karma:
        files:
          "<%= application.build %>/karma.conf.js": "karma.conf.coffee"

    less:
      build:
        options:
          paths: ["<%= bower.directory %>", "<%= application.source %>/less" ]
          cleancss: true
          ieCompat: false
        files:
          "<%= application.output %>/application.css": "<%= application.source %>/less/application.less"

    imagemin:
      dist:
        files: [
          expand: true
          cwd: "<%= application.build %>/images"
          src: "**/*.{png,jpg,jpeg}"
          dest: "<%= application.build %>/images"
        ]

    svgmin:
      dist:
        files: [
          expand: true
          cwd: "<%= application.build %>/images"
          src: "**/*.svg"
          dest: "<%= application.build %>/images"
        ]

    # Put files not handled in other tasks here
    copy:
      build:
        files: [
          expand: true
          dot: true
          cwd: "<%= application.source %>"
          dest: "<%= application.output %>"
          src: ["*.ico", "images/**/*.{webp,gif,png,jpg,jpeg,svg}", "fonts/**/*"]
        ]

    uglify:
      options:
        mangle: false
      scripts:
        files:
          "<%= application.output %>/application.js": ["<%= application.output %>/application.js"]

    jade:
      pages:
        files: [
          expand: true
          cwd: "<%= application.source %>/pages"
          src: ["*.jade"]
          dest: "<%= application.output %>"
          ext: ".html"
        ]
      templates:
        files: [
          expand: true
          cwd: "<%= application.source %>/template"
          src: ["**/*.jade"]
          dest: "<%= application.build %>/template"
          ext: ".html"
        ]

    concurrent:
      build: ["jade", "coffee:build", "less", "copy:build"]
      test: ["coffee"]

    browserify:
      build:
        src: ["<%= application.build %>/scripts/application.js"]
        dest: "<%= application.build %>/scripts/combined-application.js"
      tests:
        src: ["<%= application.build %>/tests/tests.js"]
        dest: "<%= application.build %>/tests/all-tests.js"
        options:
          aliasMappings:
            cwd: "<%= application.build %>/scripts",
            src: ['**/*.js']

    concat:
      scripts:
        src: sources.vendor.concat ["<%= application.build %>/scripts/combined-application.js"]
        dest: "<%= application.output %>/application.js"

    ngtemplates:
      build:
        cwd: "<%= application.build %>"
        src: "template/**/*.html"
        dest: "<%= application.build %>/scripts/templates.js"
        options:
          bootstrap: (module, script) ->
            return '(function() {module.exports = ["$templateCache", function($templateCache) {'+script+'}];}).call(this);'

    karma:
      options:
        files: sources.vendor.concat [
          "<%= bower.directory %>/angular-mocks/angular-mocks.js"
          "<%= application.build %>/tests/all-tests.js"
        ]
        basePath: __dirname
      continuous:
        configFile: '<%= application.build %>/karma.conf.js',
        singleRun: true,
        browsers: ['PhantomJS']


  grunt.registerTask "test", [
    "clean"
    "concurrent:test"
    "ngtemplates"
    "browserify"
    "concat"
    "karma"
  ]

  grunt.registerTask "build", [
    "clean:build",
    "concurrent:build",
    "ngtemplates",
    "browserify",
    "concat:scripts",
    "uglify"
  ]

  grunt.registerTask "default", ["build"]

快速简介：

concat将您提供的任何源文件连接到单个文件输出中
jshint只是在你提供的任何文件上运行jshint
less通过使用给定配置的less编译器运行您指定的任何文件
uglify运行您通过uglifyjs指定的javascript，这会缩小您的代码
copy将您指定的文件从源位置复制到目标
clean删除给定位置的文件，这对于进行干净的构建非常有用

希望有所帮助。

这些插件是什么？

1 个答案: