javascript - 使用 Grunt Serve 在本地主机上显示网站？

Question

我过去构建过 Gruntfiles，但主要是为了编译 Less 和 Jade，所以这有点超出了我的舒适区，我正在努力弄清楚该怎么做。

我想使用 Gruntfile 来:

1. 将 Jade 编译为 html
2. 将 Less 编译为 css
3. 在 localhost:9000 上构建并显示网站
4. 保存文件后刷新localhost:9000(我假设这使用grunt watch？)

基本上，我希望保持轻松简单，这样一旦我学会了，我就可以用它来教我认识的其他人。 :)

这是我的 Gruntfile 到目前为止的样子。我在那里有 grunt-serve ，但是当我运行它时，页面上没有任何内容加载，所以我真的很困惑。感谢您的帮助!

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.initConfig({
    jade: {
      compile: {
        options: {
          client: false,
          pretty: true
        },
        files: [ {
          cwd: "assets/views",
          src: "**/*.jade",
          dest: "public",
          expand: true,
          ext: ".html"
        } ]
      }
    },    

    less: {
      development: {
        options: {
          compress: true,
          yuicompress: true,
          optimization: 2
        },
        files: {
          // target.css file: source.less file
          'public/css/main.css': 'assets/less/main.less',

        }
      }
    },

    watch: {
      styles: {
        files: [
          'less/main.less',
        ],
        tasks: ['less'],
        options: {
          nospawn: true
        }
      }
    },

    serve: {
      options: {
        port: 9000
      }
    }
  });

  grunt.registerTask('default', ['jade','less']);
  grunt.loadNpmTasks('grunt-serve');
};

Answer 1

我认为你的构建任务是运行jade和less，但不是服务。而不是

grunt.registerTask('default', ['jade','less']);

尝试

grunt.registerTask('default', ['jade','less','serve']);