【grunt】学习使用grunt来打包JavaScript和CSS程序的教程-JavaScript-CSS

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【学习使用grunt来打包JavaScript和CSS程序的教程】，下面是详细的讲解！

学习使用grunt来打包JavaScript和CSS程序的教程

module.exports=function (grunt) { 
 // grunt配置 
 grunt.initConfig({ 
 pkg: grunt.file.readJSON('package.json'), 
 concat: { 
  options: { 
  separator: ';' 
  }, 
  dist: { 
  src: ['js_s/function.js', 'js_s/jquery.validate.js'], 
  dest: 'js_d/main.js' //合并不压缩 
  } 
 }, 
 uglify: { 
  options: { 
  banner: '\n' //文件顶部的注释，可自定义 
  }, 
  build: { //将package.json中的file对应的文件，进行压缩并重命名 
  src: 'js_s/<%=pkg.file %>.js',  //注意空格，官方配置例子是pkg.name 
  dest: 'js_d/<%=pkg.file %>.min.js' //注意空格，官方配置例子是pkg.name 
  }, 
  buildall: {//将js_s文件夹下的所有js文件，压缩后，放到js_d文件夹中，文件名不变 
  files: [{ 
  expand:true, 
  cwd:'js_s',//js目录下 
  src:'** 
     banner: '' 
    }, 
    files: { //单个CSS文件压缩 
     'css_d/index.min.css': ['css_s/index.css'] 
    } 
   }, 
  test: {//按文件夹下的所有CSS文件，压缩后，放到新的文件夹中，文件名不变 
    files: [{ 
   expand:true, 
   cwd:'css_s',//css目录下 
   src:'**/*.css',//所有css文件 
   dest: 'css_d'//输出到此目录下 
   }] 
   } 
  } 
 }); 
 // 加载插件 
 grunt.loadNpmTasks('grunt-contrib-uglify'); 
 grunt.loadNpmTasks('grunt-contrib-concat'); 
 grunt.loadNpmTasks('grunt-contrib-jshint'); 
 grunt.loadNpmTasks('grunt-contrib-cssmin'); 
 
 // 是否调用插件功能 
 //grunt.registerTask('default', ['concat','uglify','jshint','cssmin']); 
 // grunt.registerTask('default', ['uglify']); 
 // grunt.registerTask('default', ['concat']); 
 //grunt.registerTask('default', ['jshint']); 
 grunt.registerTask('default', ['cssmin']); //CSSMIN插件的功能能用，其他功能都不起作用 
} 

关于学习使用grunt来打包JavaScript和CSS程序的教程的用户互动如下：

　　相关问题：前端Grunt使用中的问题。。。。。。求大神解决

　　答：事实上前端构建过程一般都是建立在前后分离基础上的，你要想让自己的构建过程清晰、简单和方便，请首先将自己的项目前后实现分离。当然这个有难度，所以你的这个场景并不是非常适合gruntjs通常的构建模式。 对应问题讲完，再给你一些建议。 npm... >>详细

　　相关问题：grunt 压缩 合并 css 后 需要删除注释 与 合并同名...

　　答：Grunt基于Node.js，其中 npm 是 Node.js 的包管理器，而Grunt和Grunt插件就通过 npm 安装并管理。 Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。 安装Node.js： 去Node.js官网，点击INSTALL下载并安装，现在的Node.js会自动安装npm。 安装完... >>详细

　　相关问题：javascript 压缩工具，多项目公用 grunt 插件（gru...

　　答：npm install -g slow-cli #安装前端构建工具cd path/to/project #进入到项目更目录slow init #初始化构建工具配置 （会自动生成 个.slow的文件，可以通过.gitignore之类的 防止提交到代码库）slow build # 构建工程（编译压缩js，css等文件）可... >>详细