为了账号安全,请及时绑定邮箱和手机立即绑定

grunt如何自动编译scss文件(sass+compass+grunt)框架

2016.11.07 16:40 3346浏览

grunt自动编译scss文件,压缩图片,js。

首先按照如下结构来创建目录。
创建目录
    statics
    |------monkey
    |------__src
    |------|------css sass源码文件
    |------|------image 图片源文件夹
    |------|------js 脚本源码文件
    |------css 项目引用文件地址,里面为压缩文件
    |------js 生成压缩文件夹
    |------image 生成压缩后文件夹,用于线上
安装软件ruby sass compass nodejs

1.安装ruby
地址:http://www.rubyinstaller.org/downloads/
2.安装sass(gem命令需要修改源地址,详情搜索gem 国内源)
命令:gem install sass
查询版本:sass -v
3.安装compass
命令:gem install compass
查询版本:compass -v
4.安装node.js
地址:http://www.nodejs.org/
5.安装grunt(npm命令需要修改源地址,详情搜索npm 国内源)
局部安装命令:npm install grunt-cli (局部安装则,需要进入statics的目录下面执行)
全局安装命令:npm install grunt-cli -g

创建package.json和Gruntfile.js
{
 "name": "grunt-sample",
 "version": "1.0.0",
 "devDependencies": {
 "grunt": "*",
 "grunt-contrib-uglify": "~0.2.7",
 "grunt-contrib-imagemin": "~0.4.0",
 "grunt-contrib-compass": "*",
 "grunt-contrib-watch": "*"
 }
}
module.exports = function(grunt) {
 // 项目配置
 grunt.initConfig({
 pkg: grunt.file.readJSON('package.json'),
 uglify: {//js压缩
 options: {
 ASCIIOnly: true
 },
 files: {
 expand: true,
 cwd: '__src/js', //批匹配相对lib目录的src来源
 src: '**/*.js', //实际的匹配模式
 dest: 'js' //目标路径前缀
 }
 },
 imagemin: {//图片压缩
 options: {
 optimizationLevel: 7
 },
 files: {
 expand: true,
 cwd: '__src/images',
 src: '**/*.{png,jpg,gif}',
 dest: 'images'
 }
 },
 compass: {
 dist: {
 options: {
 sassDir: '__src/css',
 cssDir: 'css',
 imagesDir: '__src/images/', //图片目录
 httpPath: '',
 httpImagesPath: '/images/',
 environment: 'production',
 // outputStyle: 'compressed', 'nested', 'expanded', 'compact'
 outputStyle: 'expanded'
 }
 }
 },
 watch: {
 uglify: {
 files: ['__src/js/**/*.js'],
 tasks: ['uglify']
 },
 imagemin: {
 files: ['__src/images/**/*.{png,jpg,gif}'],
 tasks: ['imagemin']
 },
 compass: {
 files: ['__src/css/**/*.scss'],
 tasks: ['compass']
 }
 }
 });

 // 加载提供"uglify"任务的插件
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-imagemin');
 grunt.loadNpmTasks('grunt-contrib-compass');
 grunt.loadNpmTasks('grunt-contrib-watch');

 // 默认任务
 grunt.registerTask('default', ['uglify', 'imagemin', 'compass']);
}
开始安装node模块

进入statics目录

npm install #有看到sceecssfully的字眼则安装成功
grunt watch #(提示如如下图)恭喜你sass+compass+grunt自动编译成功。
#提示如果修改了__src目录下的scss,js,img的文件grunt自动编译的话,可以用grunt来手动编译以下,后在grunt watch

我的个人博客
我的it心得

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

2人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消