grunt合并压缩js,css文件(第二弹)

原创 2016年05月31日 15:02:52

废话不多说,直接上图:

目录结构,你懂得



package.json文件(用什么安装什么npm install):

{  
  "name": "anme",
  "file": "filename",
  "version": "0.1.0",  
  "description": "description",
  "license": "MIT",  
  "devDependencies": {  
    "grunt": "~0.4.1",  
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",  
    "grunt-contrib-concat": "~0.5.1",
    "grunt-contrib-cssmin": "~0.12.3"
  },  
  "dependencies": {  
    "express": "3.x"  
  }  
} 

css的压缩合并Gruntfile.js文件(灵活调用即可):

module.exports = function (grunt) {  
  // 项目配置  
  grunt.initConfig({  
    pkg: grunt.file.readJSON('package.json'),
    concat : {
      css : {
        src: ['src/*.css'],
        dest:'dest/all.css'
      }
    },
    cssmin: {
      buildall: {//按原文件结构压缩css文件夹内所有JS文件
        files: [{
          expand:true,
          cwd:'src',//src目录下
          src:'**/*.css',//所有css文件
          dest: 'dest'//输出到此目录下
        }]
      }
    }
  });  
  // 加载提供"uglify"任务的插件  
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // 默认任务  
  grunt.registerTask('default', ['cssmin']);
  //grunt.registerTask('default', ['uglify']);
  //grunt.registerTask('default', ['concat']);
}

js的压缩合并Gruntfile.js文件(灵活调用即可):

module.exports = function (grunt) {  
  // 项目配置  
  grunt.initConfig({  
    pkg: grunt.file.readJSON('package.json'),  
    uglify: {  
      options: {  
        banner: '/* <%= grunt.template.today("yyyy-mm-dd") %> */\n'  
      },
      buildall: {//按原文件结构压缩js文件夹内所有JS文件
        files: [{
          expand:true,
          cwd:'src',//src目录下
          src:'**/*.js',//所有js文件
          dest: 'dest'//输出到此目录下
        }]
      }
    },
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        //src: ['src/index.js', 'src/main.js', 'src/style.js'],
        src: ['src/*.js'],
        dest: 'dest/all.js'
      }
    },
    
  });  
  // 加载提供"uglify"任务的插件  
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // 默认任务
  //grunt.registerTask('default', ['cssmin']);//压缩样式
  //grunt.registerTask('default', ['uglify']);//压缩脚本
  grunt.registerTask('default', ['concat']);//合并脚本
}

建议:多动手,多尝试,你会懂的!


相关文章推荐

grunt合并压缩js,css文件

利用grunt前端工具,合并压缩js、css文件等

Grunt压缩、合并js/css文件

一、Grunt简介Grunt是一个基于命令的javascript工程命令行构建工具。 1. 官网:http://gruntjs.com/ 2. 中文网:http://www.gruntjs....
  • napoay
  • napoay
  • 2016年06月15日 08:31
  • 1617

grunt压缩js和css文件(1)

接下来是个人的理解:压缩js1、node安装,node会自动安装npm。 安装完之后查看版本:node -v 和 npm -v 2、新建项目后package.json 安装。命令:npm init(直...

【js&css文件压缩】lua+icombo+nginx 服务端的压缩合并 -2

上一次我们是通过使用php的minify开源项目,来达到目标css和js文件的压缩以及合并。这一次我们将会通过在服务器端配置,达到同样的效果。 前提:首先我们需要先配置一下服务器的软件,nginx服...

Gulp压缩合并js/css文件,压缩图片,以及热更新教程

var gulp = require('gulp'); var concat = require('gulp-concat');//- 多个文件合并为一个; var minifyCss = requi...

Gulp压缩、合并js/css文件,压缩图片以及热更新教程

Gulp压缩教程:(需全局安装gulp $ npm install gulp -g) 1、cdm进入项目根目录 npm init(生成一个package.json,保存当前项目的依赖) 2、安装相关...

Js Css文件压缩工具源码

  • 2012年05月08日 08:54
  • 300KB
  • 下载

在服务端合并js和css文件

YSlow会告诉我们,合并所有的js和css文件可以减少HTTP请求,这样能提升访问速度。 通常为了开发的方便,我们会把js按用途分类,这样就会有很多js文件,比如sablog的jscript文...

js css文件合并工具

  • 2016年04月26日 09:08
  • 7KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:grunt合并压缩js,css文件(第二弹)
举报原因:
原因补充:

(最多只允许输入30个字)