grunt + sass 使用记录
2024-08-24 12:58:10
环境依赖
- 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']);
};
参考资源:
最新文章
- webstorm对WebGL自动提示
- quantile normalization原理
- Monkey学习(3)如何在Android模拟器中安装apk
- mysql连接超时
- android122 zhihuibeijing 主页面搭建
- 基于Python的TCP阻塞式echo服务器
- 2014 ACM-ICPC Asia Anshan Regional Contest(Online Version)
- 【技术文档】《算法设计与分析导论》R.C.T.Lee等&#183;第5章 树搜索策略
- oralce 10g 官方认证的操作系统版本
- Git从远程库克隆
- 第6章 影响 MySQL Server 性能的相关因素
- MiniProfiler工具
- Beta敏捷冲刺每日报告——Day3
- (转)Db2 数据库常见堵塞问题分析和处理
- wp rest api 授权方法步骤(使用JWT Authentication插件)
- java后台服务器启动脚本
- [转载]Apple Watch 开发详解
- Solr导入MySQL数据之dataimport-handler
- 高密度WIFI部署要点
- 【校招面试 之 C/C++】第9题 C++多态
热门文章
- Haskell语言为什么值得你去学习
- JSP有哪些动作?
- Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G
- .Net Core中依赖注入服务使用总结
- MongoDB--副本集基本信息【面试必备】
- 最短路——弗洛伊德算法(floyd)
- 解决Navicat 连接服务器数据库报10060问题
- How to modify rosbag?如何修改rosbag?
- 洛谷P2534 [AHOI2012]铁盘整理
- [WebShow系列] Web浏览器最大化满屏及比例缩放方法