闲来无聊百度、谷歌发现一好东西,原来需要手动操作的现在就用grunt搞定了,O(∩_∩)O哈哈~
最重要的两个文件:package.json、Gruntfile.js
===============================开始动手============================================
配置文件package.json:
{ "name": "demo", "file": "zepto", "version": "0.1.0", "description": "demo", "license": "MIT", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-copy": "^0.6.0", "grunt-contrib-cssmin": "~0.5.0", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-uglify": "~0.2.1", "grunt-strip": "~0.2.1" }, "dependencies": { "express": "3.x" } }
配置文件Gruntfile.js:
module.exports = function (grunt) { //项目配置 grunt.initConfig({ uglify: {//javascript压缩 build: { files: [ { expand: true, cwd: 'src/static/h5v3/script', src: '**/*.js', dest: 'dest/static/h5v3/script' } ] } }, cssmin: {//css压缩 compress: { files: { 'dest/static/h5v3/css/style.css': [ "src/static/h5v3/css/*.css", "src/static/h5v3/css/**/*.css" ] } } }, copy: {//拷贝目录 script: { expand: true, cwd: 'src', src: ['**'], dest: 'dest', options: { process: function (content, srcpath) { if (srcpath.indexOf("static/h5v3/css") > -1) { console.log("h5v3---css 不用拷贝。。。"); return; } else { return content; } } } } }, clean: {//删除不想要的文件及目录 build: { src: [ 'dest/static/h5v3/css' ] } } }); //加载相应模块 grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); //启动任务了 grunt.registerTask('default', ['copy', 'clean', 'cssmin', 'uglify']); }
=================================配置结束=========================================
注运行效果见附件O(∩_∩)O哈哈~
相关推荐
**Grunt 学习资料详解** Grunt 是一个基于任务的JavaScript构建工具,它通过预设的任务自动化项目构建过程,包括编译、测试、清理、压缩等。在前端开发中,Grunt 可以极大地提高工作效率,使得开发者能够专注于代码...
**Grunt 学习笔记** Grunt 是一个基于任务运行器的 JavaScript 工具,它在前端开发领域中被广泛使用,主要用于自动化构建、测试、压缩、合并等任务,极大地提高了开发效率。Grunt 依赖于 Node.js 环境,并通过 npm...
**Grunt CLI模块详解** Grunt CLI(Command Line Interface)是Grunt的命令行界面工具,它是Grunt工作流程中的核心部分,允许开发者在终端中执行自动化任务。Grunt是JavaScript的世界里一个流行的构建工具,它能...
**Grunt 学习教程** Grunt 是一个广泛使用的JavaScript任务运行器,它自动化了前端开发中的许多重复性工作,如文件编译、合并、压缩、测试等。本教程将帮助你了解Grunt的基本概念、安装步骤以及如何配置和运行...
**Grunt入门练习Demo** Grunt,作为JavaScript的构建工具,是前端开发中不可或缺的一部分。...Grunt的强大之处在于它的灵活性和可扩展性,你可以根据需要添加更多任务和插件,打造属于自己的高效前端开发环境。
`grunt-cli`是Grunt(一个JavaScript任务运行器)的命令行接口,它允许开发者在命令行中执行Grunt任务。这个压缩包包含了`grunt-cli`的0.1.13版本,这是一个早期但仍然被一些项目依赖的版本。在这个版本中,除了`...
Grunt 的强大之处在于其丰富的插件生态系统。例如,`grunt-contrib-concat` 可以用来合并多个 JavaScript 文件,`grunt-contrib-uglify` 可以压缩 JavaScript,`grunt-contrib-less` 编译 Less 到 CSS,还有 `grunt-...
**Grunt前端开发工具部署** Grunt 是一个广泛使用的JavaScript任务运行器,它极大地提高了前端开发者的工作效率。Grunt 靠的是配置文件`Gruntfile.js`,在这个文件中,开发者可以定义一系列自动化任务,比如编译...
### Grunt.js Cookbook知识点概述 ...通过学习本书,读者不仅能够掌握Grunt.js的基本使用方法,还能深入了解如何利用Grunt.js来优化开发流程、提高生产力。无论是初学者还是有一定经验的开发者,都能够从中获益匪浅。
**Grunt项目构建样例详解** 在Web开发中,项目构建是提高开发效率和优化生产环境资源的关键步骤。`Grunt`是一个JavaScript任务运行器,它允许开发者通过配置文件定义一系列自动化任务,如代码编译、文件压缩、单元...
`grunt-contact`模块是Grunt工作流中的一个插件,用于简化前端开发过程中的任务自动化。Grunt是一款基于JavaScript的任务运行器,它可以帮助开发者执行预处理、编译、压缩、测试等一系列构建任务。在这个场景中,`...
Grunt 的强大之处在于其丰富的插件生态。例如,`grunt-contrib-concat` 用于合并文件,`grunt-contrib-uglify` 可以压缩 JavaScript 代码,`grunt-contrib-watch` 能监听文件变化并自动执行任务。通过 npm,你可以...
**Grunt安装与使用** Grunt是JavaScript世界中的一款任务自动化工具,它允许开发者通过配置文件定义一...通过下载提供的资源,你可以逐步学习和实践Grunt的安装与使用,进一步掌握JavaScript项目的自动化构建流程。
Grunt是JavaScript的一个任务运行器,它通过自动化工作流程来...学习Grunt不仅能够提升你的前端构建能力,也能让你对整个开发流程有更深入的理解。通过这个实例代码,你应该能够快速上手并熟练运用Grunt进行项目构建。
在项目中,Gruntfile.js是Grunt的配置文件,它包含两个主要部分:`grunt.initConfig()`用于定义任务配置,`grunt.loadNpmTasks()`用于加载所需插件。例如,以下配置将实现JavaScript文件的合并和压缩: ```...
在IT行业中,自动化工具的使用可以极大地提升开发效率和代码质量。Grunt是JavaScript的一个构建工具,它允许开发者通过配置任务来...通过学习和实践这个环境,你可以更好地掌握JavaScript项目管理和自动化工具的使用。
**Grunt:JavaScript的世界里的构建大师** 在JavaScript开发领域,自动化工具是不可或缺的一部分,而Grunt就是其中的一款强大且流行的构建工具。Grunt允许开发者通过配置文件定义一系列的任务,包括编译、测试、...
Grunt的强大之处在于其丰富的插件生态系统。通过`npm install grunt-plugin-name --save-dev`命令,你可以安装各种插件以扩展Grunt的功能,如处理CSS、处理图像、处理模板语言、测试代码质量等。例如,`grunt-...
在grunt中,这个过程通常由两个插件完成——`grunt-contrib-uglify`用于JavaScript代码的压缩,`grunt-contrib-concat`用于代码的合并。通过阅读源码,我们可以发现这些插件使用了诸如uglify-js和lodash等库,它们...
一个标准的Grunt项目通常包含两个核心文件: 1. `package.json`:存储项目元数据,包括依赖库的版本信息。 2. `Gruntfile`:默认名为`Gruntfile.js`或`Gruntfile.coffee`,用来配置任务和加载插件。 在`package....