grunt合并压缩js、css文件

参考文章如下：

http://www.cnblogs.com/yexiaochai/p/3594561.html

http://www.cnblogs.com/yexiaochai/p/3602002.html

http://www.cnblogs.com/snandy/archive/2013/03/07/2946989.html

http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html

http://www.cnblogs.com/snandy/archive/2013/05/20/3088613.html

以上两个牛人的文章写得已经很棒了，我只奉上我的文件,package.json和Gruntfile.js

对js文件进行压缩并且合并操作

1.package.json文件

{  "name": "demo",  "file": "zepto",  "version": "0.1.0",  "description": "demo",  "license": "MIT",  "devDependencies": {  "grunt": "~0.4.1",  "grunt-contrib-jshint": "~0.6.3",  "grunt-contrib-concat": "~0.5.0",  "grunt-contrib-uglify": "~0.2.1",  "grunt-contrib-requirejs": "~0.4.1",  "grunt-contrib-copy": "~0.4.1",  "grunt-contrib-clean": "~0.5.0",  "grunt-strip": "~0.2.1"  },  "dependencies": {  "express": "3.x"  }
}

　　2.Gruntfile.js

module.exports = function (grunt) {  grunt.initConfig({  concat: {  options: {  },  dist: {  src: ['src/**/*.js'],//src文件夹下包括子文件夹下的所有文件  dest: 'dist/built.js'//合并文件在dist下名为built.js的文件
    }  },  uglify: {  build: {  src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件  dest: 'dist/built.min.js'//压缩文件为built.min.js
      }  }
});  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.registerTask('default', ['concat','uglify']);
}

对CSS进行合并压缩

如有没有下载cssmin的话，需要下载

在nodejs命令行中输入 npm install grunt-css

package.json跟上面一样

module.exports = function (grunt) {  grunt.initConfig({  concat: {//css文件合并
    css: {  src: ['src/css/*.css'],//当前grunt项目中路径下的src/css目录下的所有css文件  dest: 'dist/all.css'  //生成到grunt项目路径下的dist文件夹下为all.css
    }  },  cssmin: { //css文件压缩
     css: {  src: 'dist/all.css',//将之前的all.css  dest: 'dist/all.min.css'  //压缩
      }  }
});
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat');  grunt.registerTask('default', ['concat','cssmin']);
}

Gruntfile.js如下：

转载于:https://www.cnblogs.com/albertzhangyu/p/6042805.html

grunt合并压缩js、css文件相关推荐

yii2 asset.php,Yii2中使用asset压缩js,css文件的方法_php实例
官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets. ...
php 压缩js css文件,PHP实现动态压缩js与css文件的方法
本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参考,具体如下: 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用只需要 ...
使用grunt合并压缩js、css文件
需要了解的知识:1.nodejs的安装与命令行使用2.nodejs安装应用3.grunt的初步了解本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件合并, ...
vite 压缩js css文件
1.需要安装 vite-plugin-compression 插件 npm install vite-plugin-compression 这个插件的作用就是将js.css文件使用gzip压缩 2. ...
NodeJs使用UglifyJs压缩js/css文件
基本指令安装 uglifyjs npm install -g uglify-js 命令 uglifyjs file.js -c -m -o file-min.js 编写Js方法说明:取fs模块,它 ...
maven js css 压缩,maven压缩js css
maven压缩 net.alchim31.maven yuicompressor-maven-plugin 1.3.0 prepare-package compress UTF-8 false fal ...
IDEA添加外部插件-yuicompressor压缩js/css
前端 IntelliJ IDEA2022.3 中自动压缩js,css文件下载文件扫描器 File Watchers 配置 File Watchers 需要下载 yuicompressor 下载文件扫 ...
合并多个js,css文件的方法：在服务端合并js和css文件
合并所有的js和css文件可以减少HTTP请求,这样能提升访问速度. 通常为了开发的方便,我们会把js按用途分类,这样就会有很多js文件,比如sablog的jscript文件夹里就有10几个文件,这样 ...
YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法（被maven打包顶替了）
YUI Compressor Maven插件可以压缩/合并js或css文件,经常用在Maven项目中,但最近发现在wabapp中执行了 mvn install 命令进行发布之后,终端中显示插件已经执行 ...

grunt合并压缩js、css文件

grunt合并压缩js、css文件相关推荐

最新文章

热门文章