npm install --registry http://registry.npm.taobao.org/ 切换源

Grunt.js 在前端项目中的实战
http://beiyuu.com/grunt-in-action/

package.json

{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-contrib-cssmin": "~0.6.1",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-imagemin": "~0.1.4",
"grunt-regarde": "latest",
"grunt-contrib-connect": "latest",
"grunt-contrib-livereload": "latest"
}
}

Gruntfile.js

module.exports = function(grunt) {
grunt.initConfig({
sass: {
compile: {
files: {
'css/core.css': ['css/core.scss']
}
}
},
cssmin: {
combine: {
files: {
'css/core.css': ['css/core.css']
}
}
},
uglify: {
options: {
mangle: false
},
build: {
files: {
'js/core.js': ['js/core.js']
}
}
},
imagemin: {
dist: {
options: {
optimizationLevel: 3
},
files: [{
expand: true,
cwd: 'imgsss/',
src: ['**/*.{png,jpg,jpeg}'],
dest: 'imgssss/'
}]
}
},
watch: {
scripts: {
files: [
'css/*.scss',
'js/*.js'
],
tasks: ['sass', 'cssmin', 'uglify']
}
}
}); grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['sass', 'cssmin', 'uglify', 'imagemin', 'watch']);
};

npm install

grunt

grunt
grunt.registerTask('default', ['less', 'watch']);
grunt build
grunt.registerTask('build', ['htmlmin', 'uglify', 'cssmin', 'imagemin']);
grunt live
grunt.registerTask('live', ['livereload-start', 'connect', 'regarde']);

xp系统node_modules里文件目录层级太深不能删除需要把文件剪切出来删除

☀【Grunt】package.json, Gruntfile.js, npm install, grunt的更多相关文章

  1. 【Node】package.json

    npm的package.json中文文档https://github.com/ericdum/mujiang.info/issues/6

  2. 【GruntMate】一个让你更方便使用Grunt的工具

    GruntMate是什么? 一个基于Grunt的项目管理可视化工具(还不知道Grunt是什么?可以谷歌一下就知道了!) GruntMate有哪些功能? 方便的管理基于Grunt的项目 方便统一管理Gr ...

  3. 【原】使用Json作为Python和C#混合编程时对象转换的中间文件

    一.Python中自定义类对象json字符串化的步骤[1]   1. 用 json 或者simplejson 就可以: 2.定义转换函数: 3. 定义类 4. 生成对象 5.dumps执行,引入转换函 ...

  4. 【04】图解JSON

    [04]图解JSON   附件列表

  5. 【转廖大神】package.json 包安装

    现在我们遇到第一个问题:koa这个包怎么装,app.js才能正常导入它? 方法一:可以用npm命令直接安装koa.先打开命令提示符,务必把当前目录切换到hello-koa这个目录,然后执行命令: C: ...

  6. 【Javascript】Windows下Node.js与npm的安装与配置

      1:先下载Node.js,网站https://nodejs.org/en/,左侧为稳定版,右侧为最新版,推荐稳定版 2:Node.js安装,运行下载后的.msi文件,一路下一步就可以了,我选择的安 ...

  7. 【前端】NodeJs包管理工具NPM

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS部署上的很多问题. 测试是否安装成功,出现版本提示表示安装成功. npm -v NPM常用命令 官方文档:https://www.npm ...

  8. 【解决】ERROR in xxx.js from UglifyJs

    当我们运行打包脚本npm run build或者打包iosweexpack build ios有可能会遇到以下报错 ERROR in index.js from UglifyJs ![](https: ...

  9. [NPM] Use package.json variables in npm scripts

    In this lesson we will show that you can leverage values that you already have provided in your pack ...

随机推荐

  1. 记录下sublime text快捷方式

    不得不说sublime text用过之后,爱不释手,这里收集一下常用的快捷方式: ctrl+shift+p:调出命令面板,在输入ss可以改变当前的代码的渲染和提示效果, 用起sublime text ...

  2. oracle 11g不能连接报ORA-12537+ora-609解决

    操作系统: windows2008 数据库:oracle11g 问题发生:一套正常跑了一年的应用系统,忽然无法连接上数据库,但是另外一个应用可以正常链接,数据入库正常. 数据库服务器端查看: 使用 l ...

  3. 将Cell中的视图取出传递到根视图

    当我们点击Cell中的某个图片时,图片会有一种从Cell中取出,放大,然后再回到原来的Cell中的效果.我的想法是:当Cell中的图片用button 来显示.当我们点击Cell中的这个button的时 ...

  4. postgres 利用unique index代替 primay key

    create UNIQUE INDEX uniq_index_piwik_log_action_idaction on piwik_log_action(idaction);   这样做的好处: 1. ...

  5. jQuery的基础语法实例

    jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...

  6. Struts2的运行原理和运行与原理

    Struts2 struts2的流程图 运行机制 1.客户端发送请求.通过ActionContextLoader调用FilterDispatcher(struts) 2.FilterDispatche ...

  7. Solr集群的搭建以及使用(内涵zookeeper集群的搭建指南)

    1   什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的索引数据量少的时候 ...

  8. couchDB入门

    无意翻到一本新书<CouchDB权威指南> 发现这就是传说中的NoSQL,看排第一的是mangodb,redis有些人说是,有些人说不是. CouchDB的开发很天才,直接可以通过java ...

  9. dom三个事件

    1,页面加载后 window.onload=function(){}; 2,页面(关闭)卸载后触发 window.onunload=function(){}; 3,页面关闭前触发 window.onb ...

  10. epoll和select区别

    先说下本文框架,先是问题引出,然后概括两个机制的区别和联系,最后介绍每个接口的用法 一.问题引出 联系区别 问题的引出,当需要读两个以上的I/O的时候,如果使用阻塞式的I/O,那么可能长时间的阻塞在一 ...