node.js - 尝试使用 Grunt.JS 启动本地网络时出现问题

Question

解决了

我正在尝试为我的 UI 测试一个管理模板，我看到该文件夹​​有一个 grunt.js 文件。我读到我需要运行 grunt connect 来启动本地服务器来测试 admin webapp。我遇到了一些问题。下面是一些屏幕截图。有人可以提供一些帮助吗？

这是我的 grunt.js 文件代码

    'use strict';

module.exports = function(grunt) {

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);



  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Configurable paths for the application
  var app = require('./package.json');
  var appConfig = {
    name: app.name
  };

  // Define the configuration for all the tasks
  grunt.initConfig({


    // Project settings
    pkg: appConfig,

    watch: {
      bower: {
        files: ['bower.json'],
        tasks: ['build']
      },
      scss: {
        files: ['scss/**/*.scss'],
        tasks: ['sass:dev']
      },
      html: {
        files: ['app/{,*/}*.html'],
        options: {
          livereload: '<%= connect.options.livereload %>'
        }
      },
      css: {
        files: ['css/{,*/}*.css'],
        options: {
          livereload: '<%= connect.options.livereload %>'
        }
      },

      js: {
        files: ['js/{,*/}*.js'],
        options: {
          livereload: '<%= connect.options.livereload %>'
        }
      }



  },

    // The actual grunt server settings
   // Project configuration.

   pkg: grunt.file.readJSON('package.json'),

      connect: {
        uses_defaults: {}
      },

      templates: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              connect().use('/bower_components', connect.static('./bower_components')),
              connect().use('/lib', connect.static('./lib')),
              connect().use('/img', connect.static('./img')),
              connect().use('/css', connect.static('./css')),
              connect().use('/js', connect.static('./js')),
              connect().use('/app', connect.static('./app')),
              connect.static('app'),
            ];
          }
        }
      },
    },

    // Compiles scss files to css
    sass: {
      dist: {
        options: { style: 'compressed', sourcemap: 'none' },
        files: { 'css/amanda.min.css': 'scss/amanda.scss' }
      },
      dev: {
        options: { style: 'expanded', sourcemap: 'none' },
        files: {
          'css/amanda.css': 'scss/amanda.scss'
        }
      }
    },

    // Make sure code styles are up to par and there are no obvious mistakes
    jshint: {
      options: {
        jshintrc: '.jshintrc',
        reporter: require('jshint-stylish')
      },
      all: {
        src: [
          'Gruntfile.js',
          'js/**/*.js'
        ]
      }
    },

    bower: {
      install: {
        options: {
          cleanTargetDir: true,
          layout: 'byComponent'
        }
      }
    }
  }),




grunt.registerTask('build', ['bower']);

grunt.loadNpmTasks('grunt-contrib-connect');
});

这是我的 Package.json 文件

{
  "name": "template",
  "version": "1.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "directories": {
    "lib": "lib"
  },
  "dependencies": {
    "grunt-http-server": "^2.1.0",
    "grunt-serve": "^0.1.6"
  },
  "devDependencies": {
    "grun": "^0.2.0",
    "grunt": "^1.0.3",
    "grunt-contrib-connect": "^1.0.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

此外，我在 PowerShell 中收到此错误：

PS C:\Users\DN1\Desktop\Envision WebApp\template> grunt connect
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: missing ) after argument list
Warning: Task "connect" not found. Use --force to continue.

Aborted due to warnings.
PS C:\Users\DN1\Desktop\Envision WebApp\template>

这是我整个文件夹的屏幕截图：

在此处输入图像描述

标签： node.jsgruntjsbootstrap-4