Блог

Я новичок в использовании grunt, пожалуйста, укажите шаги по интеграции grunt с динамическим веб-проектом (webcontent).

хорошо, я постараюсь вам помочь.

создайте файл с именем 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.

в любом случае, дайте мне знать, если это помогло вам.

удачи