欢迎您访问我爱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等文件)可... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 【ExtJs】ExtJs 表单提交登陆实现代码-表单提交-
- 【ajax清除浏览器缓存】Ajax清除浏览器js、css、
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-