闲来无聊百度、谷歌发现一好东西,原来需要手动操作的现在就用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学习笔记,来源于个人博客,仅供学习参考
写wangEditor那个大神写的关于grunt使用的教程,写的非常用心,我就跟着学习了一下,顺便把配置打了个包保存了,需要的同学自取。不是我非要资源积分啊,现在csdn上传资源至少要选择2个积分。
grunt运行的命令行 放在C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-cli下的
grunt.js cookbook
这是我按《用grunt搭建自动化的web前端开发环境-完整教程》写的Demo。
Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。
grunt-cli的0.1.13版本压缩包,里面带有node_modules等目录。供有需要的人使用。
简单的grunt练习, 看看grunt-contact 模块是怎么使用的. 注意要在C:\Users\Administrator\AppData\Roaming\npm目录放一个grunt-cli
grunt工具实现前端代码检测,JS文件压缩合并等.
Grunt的实例代码(快速理解Grunt的用法)(内含代码注释)
Grunt的使用demo,包含4个插件:jshint, watch, uglify, concat
grunt学习安装nodejsGrunt和所有grunt插件都是基于nodejs来运行的,去 https://nodejs.org/下载安装完成。 安装了nodejs之后,可以在你的控制台中输入“node -v”来查看nodejs的版本,也顺便试验nodejs是否安装成功...
grunt项目构建样例,实现js文件css文件等的压缩和合并
Grunt 离线安装包,包括所有依赖,上传上来看能用不。
grunt-cli, Grunt接口命令 grunt Grunt 命令行 接口。全局安装,你就可以在系统的任何位置访问 grunt 命令。npm install -g grunt-cli注意:命令的工作是加载并运行你在本地安装的Grunt版本,不管它的版本
使用grunt-babel 转换es6 到es5依赖库
time-grunt, 显示grunt任务的执行执行时间 时间 grunt 显示 grunt任务的经过执行时间 安装$ npm install --save-dev time-grunt用法// Gruntfile.jsmodule.exports =
简述关于Grunt依赖node的安装使用和功能
grunt-wordpress, 用于将内容发布到WordPress的Grunt插件 grunt使用 WordPress 发布内容到WordPress的Grunt插件。支持这里项目通过捐赠在Gratipay上。正在启动Grunt的wordpress就像任何其他的插件插件一样工作。 ...
grunt-1.4.1.tar.gz