그란트 : CSS (sass, concat, minify) 및 JS (concat, minify)에 대한 별도의 프로세스를 실행하는 방법

Question

나는 잡담 시계 설명서를보고 있지만 자바 스크립트 파일을위한 별도의 프로세스를 실행하는 방법을 볼 수있다. . 아래는 내가 CSS를 위해 무엇을 가지고 :

GruntFile.js

module.exports = function(grunt) { 
    grunt.initConfig({ 
     // running `grunt sass` will compile once 
     sass: { 
      dist: { 
       options: { 
        style: 'expanded' 
       }, 
       files: { 
        './public/css/sass_styles.css': './src/sass/sass_styles.scss' // 'destination': 'source' 
       } 
      } 
     }, 
     // bring in additonal files that are not part of the sass styles set 
     concat: { 
      dist: { 
       src: [ 
        'public/css/datepicker.css', 
        'public/css/jquery.tagsinput.css', 
        'public/css/sass_styles.css', 
        'application/themes/japantravel/style.css' 
       ], 
       dest: 'public/css/all.css', 
      }, 
     }, 
     // running `grunt cssmin` will minify code to *.min.css file(s) 
     cssmin: { 
      minify: {         
       expand: true, 
       cwd: "public/css/", 
       src: ["all.css", "!*.min.css"], 
       dest: "public/css/", 
       ext: ".min.css" 
      } 
     }, 
     // running `grunt watch` will watch for changes 
     watch: { 
      files: ["./src/sass/*.scss", "./src/sass/partials/*.scss"], 
      tasks: ["sass", "concat", "cssmin"] 
     } 
    }); 

    // load tasks 
    grunt.loadNpmTasks('grunt-contrib-sass'); 
    grunt.loadNpmTasks('grunt-contrib-concat'); 
    grunt.loadNpmTasks("grunt-contrib-cssmin"); 
    grunt.loadNpmTasks("grunt-contrib-watch"); 
}; 

당신은 내가 CSS [ "말대꾸", "CONCAT", "cssmin"]에 대한 작업을 볼 수 있지만 내가하고 싶은대로 개별 파일 (js)에 대한 별도의 작업 - concat 및 minify - 및 변경 사항 (watch) 수신 대기. 누군가 올바른 방향으로 나를 가리킬 수 있을지, 나는 내가 무엇을 검색해야하는지에 대해 정말로 확신하지 못한다. 시계가 처리 할 수있는 것이거나 다른 플러그인입니까? 나는 조금 쓸데없는 말투로 그렇게 사용하는 방법을 알아 내려고 노력하고있다. 감사합니다

Answer 1

당신은 '그 루트 - 동시'을 사용할 수 있습니다, 당신은 그것으로 여러 작업을 정의 할 수 있습니다. 시계 세트와 함께 적절한 솔루션을 갖게됩니다. https://github.com/sindresorhus/grunt-concurrent

# to install: 
npm install grunt-concurrent --save-dev 

그러면 조정 된 기능입니다. 여전히 uglify 및 jshint 속성을 설정해야합니다.하지만 그게 여기서 문제가 아니라고 생각합니다.

module.exports = function(grunt) { 
    grunt.initConfig({ 

     /* .. */ 

     // running `grunt watch` will watch for changes 
     watch: { 
      // Use 'sets' like this, just make up a name for it: 
      watchCss: { 
       files: ["./src/sass/*.scss", "./src/sass/partials/*.scss"], // Directory to look for changes 
       tasks: ["concurrent:taskCss"] // Tasks you want to run when CSS changes 
      }, 
      watchJs: { 
       files: ["./src/js/**/*.js"], // Directory to look for changes 
       tasks: ["concurrent:taskJs"] // Tasks you want to run when JS changes 
      } 
     }, 
     concurrent: { 
      taskCss: ["sass", "concat", "cssmin"], // define the CSS tasks here 
      taskJs: ["jshint", "concat", "uglify"] // define the JS tasks here 
     }, 
    }); 

    // load tasks 
    grunt.loadNpmTasks("grunt-contrib-sass"); 
    grunt.loadNpmTasks("grunt-contrib-concat"); 
    grunt.loadNpmTasks("grunt-contrib-cssmin"); 
    grunt.loadNpmTasks("grunt-contrib-watch"); 
    grunt.loadNpmTasks('grunt-contrib-jshint'); // Added 
    grunt.loadNpmTasks('grunt-contrib-uglify'); // Added 
    grunt.loadNpmTasks("grunt-concurrent"); // Added 

    // register tasks (note: you can execute sets from concurrent) 
    grunt.registerTask('default', ["concurrent:taskCss", "concurrent:taskJs"]); 
    grunt.registerTask('css', ["concurrent:taskCss"]); 
    grunt.registerTask('js', ["concurrent:taskJs"]); 
}; 

변경을 감시하려면

grunt watch 
# if a css file is changed, only the css tasks are performed 

또한 예를 들어, 직접 프롬프트에서 작업을 실행할 수 있습니다 https://github.com/gruntjs/grunt-contrib-uglify https://github.com/gruntjs/grunt-contrib-jshint :

grunt js 
# This will only execute the registered task 'js' 
# In this case that task points to 'concurrent:taskJs' wich will run jshint, concat and uglify 

추하게 및 jshint 설치하려면

npm install grunt-contrib-uglify --save-dev 
npm install grunt-contrib-jshint --save-dev