Sass安装(mac) $ sudo gem install sass scss编译成css文件 $ sass ui.scss ui.css CLI安装 $ npm install -g grunt-cli Grunt安装 $ npm install grunt Grunt入门 package.json { "name": "my-project-name", "version": "0.1.0", "devDepe…

一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了. 二.安装和使用 2.1 安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem install sass 然后,就可以使用了. 2…

第一步: tools->builde system->new build system 第二步: 粘贴如下代码到新建文档中: { "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css"], "selector": "source.sass, source.scss", &quo…

grunt-cli 全局装完之后,就可以给每个项目装grunt了.   1.先把package.json和Gruntfile.js拷到项目下(PS:这两个文件是每个项目装grunt的时候必带的) 2.cmd进入到项目目录下然后执行“npm install grunt --save-dev”(PS:这一步是用来给项目装grunt的) 3.执行"npm install grunt-contrib-uglify --save-dev"  (PS:这一步是安装压缩插件) 4.配置Gruntfi…

1.我新建了一个项目工程 2.路径在 3.编译 sass 要编译的sass文件名.scss ../存放编译后的css目录/编译后的css名称.css 4.刷新项目,就编译出来了 6.当然,你要嫌麻烦的话,那可以监听,只要有变化,就会自动编译.就不需要你每次手动编译了 sass --watch first.scss:../css/first.css…

先上图:…

昨天晚上看到 bootstrap 全局CSS样式中 使用Less 章节中提到的通过grunt重新编译CSS和Javascript文件,对于我这样从未接触过windows cmd node控制台 npm的人,学习起来就有很大的难度了. 那么我们照着教程一步一步来: 第一步:安装node.js 网址:https://nodejs.org/en/download/ 下载版本:node-v6.10.2-x64.msi 如果遇见2502 2503错误,可以查看这个地址,实测有效,权限不够导致的问题: ht…

一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 易于学习 通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道. 二.依赖安装 1.安装node.js, 2.全局安装gulp npm install gulp -g 3.本地安装gulp npm init…

引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存放我们要压缩.合并的js文件.   图片.png 3.创建package.json文件   文件.png package.json文件,包含了项目的一些信息,如项目的名称.描述.版本号.依赖包等. package.json文件中的内容如下: { "name": "grunt&qu…

准备工作 grunt 基于nodeJs所以 nodeJs需要的基础配置都需要安装 1.Grunt 安装 npm install -g grunt-cli 这是全局安装 2.在当前文件下npm init 配置package.json文件 3.安装了grunt,这个只是一个框架,里面会用很多插件,具体可以去官网查看,这里记录了8种简单的用法. 3.1 把指定的文件全部拼接变为一个文件,插件名称:grunt-contrib-concat.3.2 把js丑化也就是压缩,函数名称普遍变成a,b,c,d,e…