Question

我是新手使用grunt，请提供将grunt与动态Web项目（webcontent）集成的步骤。

Answer 1

好的，我会尽力帮助你。

在项目的根目录中创建一个名为 Gruntfile.js 的文件：

根据您的项目更改路径。

module.exports = function(grunt) {
    var config = {};

    //src ===============================
    var src;
    config.src = src = {
        sassMain: 'scss/main.scss',
        distFolder: 'public/stylesheets/app.dist.css',
        devFolder: 'public/stylesheets/app.dev.css',
        sassFolder: 'scss/**/*.scss',
        serverPort: 8000
    };


    //Concat ===============================

    var concat
    config.concat = concat = {};

    concat.dev = {
        files: {
            "public/myapp.development.js": [
                "with-bootstrap/public/js/vendor", "with-bootstrap/public/js/**/*.js"
            ]
        }
    };

    //Watch ===============================
    config.watch = {
        scripts: {
            files: ["<%= src.sassFolder %>"],
            tasks: ["sass:dist"]
        }
    }

    //Sass ===============================
    var sass;
    config.sass = sass = {};

    //distribution
    sass.dist = {
        options: {
            style: "compressed",
            noCache: true,
            sourcemap: 'none',
            update: true
        },
        files: {
            "<%= src.distFolder %>": "<%= src.sassMain %>"
        }
    };

    //development env.
    sass.dev = {
        options: {
            style: "expanded",
            lineNumber: true,
        },
        files: {
            "<%= src.devFolder %>": "<%= src.sassMain %>"
        }
    };


    //grunt serve ===============================
    config.connect = {
        server: {
            options: {
                livereload: true,
                port: "<%= src.serverPort %>"
            }
        }
    };


    //Register custom tasks ===============================
    grunt.registerTask('default', ['dev']);
    grunt.registerTask('dev', ['concat:dev', 'sass:dev']);
    grunt.registerTask('dist', ['concat:dev', 'sass:dist']);
    grunt.registerTask('serve', ['connect:server', 'watch']);
    require('time-grunt')(grunt);
    require('load-grunt-tasks')(grunt, {
        scope: 'devDependencies'
    });



    //General setup ===============================
    grunt.initConfig(config);

};

在项目运行的根目录中：npm init填写项目信息。

打开 package.json 文件后，我们现在将包含要安装的grunt任务。

 "devDependencies": {
    "grunt": "*",
    "grunt-contrib-concat": "*",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-sass": "*",
    "grunt-contrib-watch": "*",
    "grunt-exec": "^1.0.1",
    "load-grunt-tasks": "^3.5.0",
    "time-grunt": "^1.3.0",
    "express": "^4.14.0"
  }

运行npm install来安装grunt任务和npm依赖项。

请注意，您需要在计算机中安装grunt和npm。

无论如何，请告诉我这是否对你有帮助。

祝你好运

如何将Grunt与来自eclipse的项目集成。

1 个答案: