2016-10-24 5 views
0

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

+0

Я предлагаю вам использовать командную строку очень просто. создайте вас gruntfile.js и будьте счастливы – Raduken

+0

не могли бы вы предоставить образец структуры – arjun

+0

Я ответил ниже. – Raduken

ответ

1

ok Я постараюсь вам помочь.

создать файл с именем 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 установить задачи хрюкать и зависимости НПХ.

помните, что вам необходимо установить в компьютер хрюканье и npm.

в любом случае сообщите мне, если это вам помогло.

удача

+0

Спасибо Радукен, это помогло мне. Если я даю полный путь к файлу, то он работает нормально, как config.watch = { скриптов: { файлов: 'D: /PROJ/Webcontent/App/view/mypage.html', tasks: ["sass: dist" ] }} Как я могу дать полный путь проекта для файлов как для всех JS, HTML и CSS файл – arjun

+0

на моем понимании, вам не нужно давать путь как D:/PROJ ....., например, ваш gruntfile.js будет внутри D:/PROJ, поэтому вам нужно посмотреть, где ваши js и css для конфигурации. – Raduken

+0

Спасибо, его работа :) – arjun