在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass。(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ruby/安装sass ②编译sass文件(eg:style) sass style.scss style.css ③监控文件/文件夹的变化来自动编译sass文件 sass --watch style.scss:style.css #file sass --watch cssFilePath #directory(cssFilePath:sass文件的路径) 注: sass编译风格:
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
2.js文件之前没有做压缩处理,如果被发现了也是用站长工具压缩以下就使用了,操作流程略多了 grunt是基于nodejs的,使用前需要安装以下nodejs,官网:nodejs.org,安装方法正常软件一样安装。nodejs的模块安装用的是npm管理的。 1.安装nodejs 2.新建一个grunt项目 标准配置: package.json #项目数据 gruntFile.js #配置grunt,设置任务,加载插件等 注:文件怎么写稍后我们具体描述,先建两个文件,文件代码可以直接复制 2.安装grunt npm install -g grunt-cli <!--2014-09-13补充 npm install grunt --save-dev 注:通过grunt -v可以查看版本 --> 注:安装 3.安装需要用到的grunt插件 npm install grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch --save-dev 注:--save-dev自动完善package.json grunt-contrib-sass #sass编译插件 4.运行监控方法 grunt watch 第一次写技术文章,不正确/不详之处多多包含,有问题一起探讨。
packjson代码:
1 { 2 "name": "ajaxTest",//项目名称 3 "description": "baiyuncms-wap-ajax",//项目描述 4 "version": "0.1.0",//项目版本 5 "private": true,//具体不明 stackoverflow上得到的答案是和版本控制相关 可选 6 "author": { 7 "name": "unofficial", 8 "email": "no@mail" 9 },//可选 10 "devDependencies": { 11 "grunt": "^0.4.5", 12 "grunt-contrib-sass": "^0.7.3", 13 "grunt-contrib-uglify": "^0.5.1", 14 "grunt-contrib-watch": "^0.6.1" 15 }//不明确版本可以使用*代替 使用--save-dev会自动填写版本 必须 16 }
gruntFile.js
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), skinPath: { js:'AjaxTest/skin/js', //jsName byNewPage 14 15 css:'AjaxTest/skin/css' //cssName style 24 29 },//可选 不使用时具体配置文件涉及到的路径需要修改 uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: '<%= skinPath.js %>/byNewPage.js', dest: '<%= skinPath.js %>/byNewPage.min.js' } },//js压缩的配置文件 sass: { // Task dist: { // Target options: { // Target options style: 'expanded' }, files: { // Dictionary of files '<%= skinPath.css %>/style.css': '<%= skinPath.css %>/style.scss' // 'destination': 'source' } } },//sass编译的配置文件 watch: { files: ['<%= uglify.build.src %>','<%= skinPath.css %>/style.scss'], tasks: ['default'] }//监控的配置文件 }); // Load the plugin 加载插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task(s). 执行默认方法 grunt grunt.registerTask('default', ['uglify','sass']); }; 常见错误分析: ① Running "watch" task Warning: More info: https://github.com/gruntjs/grunt-contrib-sass Aborted due to warnings. 原因说明:没有安装ruby环境,并且需要安装一下sass. ② G:\wwws\unofficial.cnblogs.com>gem install sass 原因说明:ruby版本太低的原因,卸载已经安装的ruby版本,http://rubyinstaller.org/downloads/这里下载最新的ruby安装成功后,再执行安装sass命令即可! ③ ERROR: Could not find a valid gem 'sass' (>= 0) in any repository 原因说明:网络连接的原因 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论