grunt + sass 使用记录
环境依赖
- Nodejs for grunt
- Ruby for sass
配置文件
package.json
{
"name": "app",
"version": "1.0.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-htmlmin": "^0.3.0",
"grunt-contrib-imagemin": "^0.9.2"
}
}
Gruntfile.js
module.exports = function (grunt) { // grunt config
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), sass: {
options: {
style: 'expanded'
},
scss: {
files: [{
src: 'src/css/main.scss',
dest: 'src/css/main.css'
}]
}
}, jshint: {
files: ['gruntfile.js', 'src/js/*.js']
}, concat: {
options: {
banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
separator: '\n/*---------分割线---------*/\n'
},
js: {
files: [{
src: ['src/js/base.js', 'src/js/script.js'],
dest: 'dist/js/<%= pkg.name %>.js'
}]
}
}, cssmin: {
css: {
files: [{
src: 'src/css/main.css',
dest: 'dist/css/<%= pkg.name %>.min.css'
}]
}
}, uglify: {
js: {
files: [{
src: 'dist/js/<%= pkg.name %>.js',
dest: 'dist/js/<%= pkg.name %>.min.js'
}]
}
}, htmlmin: {
options: {
removeComments:true,
collapseWhitespace:true
},
dist: {
files: [{
expand: true, // all html
cwd: 'src/',
src: ['**/*.html'],
dest: 'dist/'
}]
}
}, imagemin: {
img: {
files: [{
expand: true, // all images
cwd: 'src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'dist/'
}]
}
}, watch: {
css: {
files: 'src/css/main.scss',
tasks: ['sass']
},
js: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
}
}); // load task
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch'); // regist task
grunt.registerTask('compile', ['watch']);
grunt.registerTask('default', ['sass', 'jshint', 'concat', 'cssmin', 'uglify']);
grunt.registerTask('html', ['htmlmin']);
grunt.registerTask('img', ['imagemin']);
};
参考资源:
grunt + sass 使用记录的更多相关文章
- sass安装记录
之前曾经安装过一次sass,不过可惜没使用,现在换了电脑重新安装,又上网找了些资料,终于安装成功,现在就当做个记录方便下次安装. 首先 到官网下载个最新版的ruby :http://rubyinsta ...
- window 安装 sass compass 记录
1.安装Ruby 安装sass 和compass 需要 Ruby 的环境,还区分xp 和win7-8 下版本区别 ruby 官网中文 ruby 官网英文 注意: xp: 下载 [xp不能下载包含64位 ...
- css3/sass 样式记录
css3 width: calc(50% - 10px) sass 1.奇偶行 .classNameA { background:red; &:nth-child(even) { backgr ...
- Grunt 使用记录
想了解Grunt,可以先去官网 看看. 第一次接触Grunt是通过Coding的移动端项目, 刚开始因为环境的问题折腾了一两天,然后就顿悟了. Grunt构建工具对于前端开发而言,简直是神器(ps.虽 ...
- grunt配置sass项目自动编译
1.安装Ruby和SASS 首先我们需要在电脑上安装Ruby和SASS.如果您使用的是Mac,您就没必要安装Ruby.如果您使用的是Window系统,你需要安装Ruby. 2.安装Nodejs 由于使 ...
- 使用Grunt启动和运行
开始使用Grunt 大多数开发人员都一致认为,JavaScript开发的速度和节奏在过去的几年里已经相当惊人.不管是Backbone.js和Ember.js的框架还是JS Bin社区,这种语言的发展变 ...
- 【转】自动化任务运行器 Grunt 迅速上手
原文转自:http://blog.jobbole.com/51586/ 这篇文章将带领你用Grunt来提速和优化网站开发的流程.首先我们会简短介绍Grunt的功能,然后我们直接上手,介绍如何用Grun ...
- Grunt自动化构建环境搭建
1.环境准备 需要安装Git.Node.Bower.Grunt.Ruby NodeJS https://nodejs.org/en/ Ruby http://rubyinstaller.org/ ...
- Grunt Part 1
Grunt Part 1 Objectives and Outcomes In this exercise, you will learn to use Grunt, the task runner. ...
随机推荐
- 7.24实习培训日志-Docker-Compose
Docker-Compose 对于昨天的考试,需要 项目根目录下需要docker/mysql/Dockerfile 文件用于构建mysql镜像 项目根目录下需要docker/java/Dockerfi ...
- 图像标注工具labelImg使用方法
最近在做打标签的工作,为了与大家参考学习,总结了在windows的环境下,基于anaconda的图像标注工具labellmg的一种使用方法! 1 搭建anaconda 以前写过怎么搭建anaconda ...
- Linux之shell备份数据库
功能概述: 使用shell脚本对服务器的数据库(全部或指定数据库)进行备份.对15天(固定天数)之前的数据库备份进行删除 命令实现: 待定
- SSM整合文档
SSM整合文档 v2 一. 文件说明 文件名 描述 spring-servlet.xml 配置SpringMvc框架相关 applicationContext.xml 配置Spring容器 sprin ...
- java线程池之一:创建线程池的方法
在Java开发过程中经常需要用到线程,为了减少资源的开销,提高系统性能,Java提供了线程池,即事先创建好线程,如果需要使用从池中取即可,Java中创建线程池有以下的方式, 1.使用ThreadPoo ...
- CPU死锁
https://blog.csdn.net/sunny05296/article/details/82858071 最近碰到了Centos7.2上终端打印soft lockup CPU死锁,系统无响应 ...
- yum 缓存包到本地
yum install –downloadonly –downloaddir=/root/mypackages/ vim 说明: --downloadonly 只下载 --downloaddir 下载 ...
- Git练习3 远程库分支 idea中状态条显示当前分支
- Exadata 12.2.1.1.0 Highlights
突然发现,在中国农历新年的这几年里,Exadata 12.2版本已经发布了. 本起去docs.oracle.com上看看它的新特性,结果发现文档还没有更新: 下面是找到的一些资料,让我们来一睹为快吧: ...
- string类型的方法
var str1 = ' this is string1 '; var str2 = 'this is string2'; str1.indexOf('s'); //args:string retur ...