如何连接和消除多个CSS和JavaScript文件grunt.js(0.3,X)

Jasdeep Khalsa提出了一个问题:How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x),或许与您遇到的问题类似。

回答者jaime给出了该问题的处理方式:

concat.js is being included in the concattask's source files public/js/*.js. You could have a task that removes concat.js(if the file exists) before concatenating again, pass an array to explicitly define which files you want to concatenate and their order, or change the structure of your project.

If doing the latter, you could put all your sources under ./srcand your built files under ./dest

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

Then set up your concattask

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

Your mintask

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

The build-in mintask uses UglifyJS, so you need a replacement. I found grunt-cssto be pretty good. After installing it, load it into your grunt file

grunt.loadNpmTasks('grunt-css');

And then set it up

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

Notice that the usage is similar to the built-in min.

Change your defaulttask to

grunt.registerTask('default', 'concat min cssmin');

Now, running gruntwill produce the results you want.

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js

希望本文对你有帮助,欢迎支持JavaScript中文网

原文链接:stackoverflow.com

上一篇:当然,6 +必须有一种方式来合并两个JavaScript的对象在一起,那是什么?
下一篇:execjs::在Windows试图跟随rubytutorial运行时出错

相关推荐

官方社区

扫码加入 JavaScript 社区