grunt配置sass项目自动编译

1、安装Ruby和SASS

首先我们需要在电脑上安装RubySASS。如果您使用的是Mac,您就没必要安装Ruby。如果您使用的是Window系统,你需要安装Ruby

2、安装Nodejs

由于使用Grunt需要Nodejs的支持,所以我们要确认自己的电脑已安装了nodejs。安装好以后看看在命令行下能不能执行node命令了,如果可以那么就表示安装成功了。

简单点的安装就是直接进入Nodejs官网下载各系统所需的安装包进行安装。

3、安装grunt

在安装grunt.js之前,需要先安装Grunt的命令行界面。安装方法也很简单,打开你的命令终端,在命令行中,输入:

$ sudo npm install grunt-cli -g

4、创建项目

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({

        //Read the package.json (optional)
        pkg: grunt.file.readJSON(‘package.json‘),

        // Metadata.
        meta: {
            basePath: ‘../‘,
            srcPath: ‘../assets/sass/‘,
            deployPath: ‘../assets/css/‘
        },

        banner: ‘/*! <%= pkg.name %> - v<%= pkg.version %> - ‘ +
        ‘<%= grunt.template.today("yyyy-mm-dd") %>\n‘ +
        ‘* Copyright (c) <%= grunt.template.today("yyyy") %> ‘,

        // Task configuration.
        sass: {
            dist: {
                files: {
                    ‘<%= meta.deployPath %>style.css‘: ‘<%= meta.srcPath %>style.scss‘
                }
            }
        },
        watch: {
            scripts: {
                files: [
                    ‘<%= meta.srcPath %>/**/*.scss‘
                ],
                tasks: [‘sass‘]
            }
        }
    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks(‘grunt-contrib-sass‘);
    grunt.loadNpmTasks(‘grunt-contrib-watch‘);

    // Default task.
    //eg: grunt sass
    //eg: grunt watch
    grunt.registerTask(‘default‘, [‘sass‘]);
};

5、目录结构

时间: 2024-10-17 20:34:15

grunt配置sass项目自动编译的相关文章

用nodej和glub-watcher写的监听go 项目自动编译,很鸡肋

glub 一般都是很轻量的编译. go太重了,改一小个部分,就编译的话,多数是编译失败. 而且很消耗性能,还没想到完美的优化办法. 暂时用个定时器 监听2秒,停止1秒,如此循环,会减少些 “无效”的编译 var watch = require('glob-watcher'); var exec = require('child_process').exec; var sys = require('sys'); var matchregs=new Array(9); var godirpath =

idea的注入和自动编译配置

1.自动编译 1)勾选如下配置即可开启自动编译功能 2)自动编译效果,如下图所示:当随便修改一个类名,然后就会进行实时编译,然后发现错误并展示出来. 2.mybatis注入dao时idea报错 背景:在spring和mybatis的整合配置文件中,已经配置了扫描dao了,但是在service层注入的时候idea显示错误,其实已经扫描到了,并不影响业务逻辑, 但是报错在这里很不好看,因此以下配置就是去掉错误的报错信息. 按照如下将error改为warning即可:

springboot项目上有个红叉,且ecplise没有自动编译项目,运行提示“错误: 找不到或无法加载主类”

近期在做springboot项目,发现springboot项目上有个红叉但找不到哪个类报错,ecplise没有把项目自动编译,运行还提示"错误: 找不到或无法加载主类",进入工作空间"项目\target\classes",发现项目java类根本没有编译,尝试各种方式发现均不可以,后来在网上发下这篇文章试了确实可以http://blog.csdn.net/u011526234/article/details/50394951,现在remark以下,希望也可以帮到其他遇

1-6 Sass 语法、编译、调试

Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 Sass 老版本,其文件名以".sass"为扩展名. 来看一个 Sass 语法格式的简单示例.假设我们有一段这样的 CSS 代码: body { font: 100% Helvetica, sans-serif; color: #333; } 现在用 Sass 的语法格式来编写: $font-

idea配置自动编译项目配置

重启项目后发现修改的配置文件没有编译进去...然后百度了才知道需要设置一下: 先打开Projiect Structure 然后发现 'SCM' compile output 这个原来在右边这里 然后右键选第一个add什么的添加到左边,这时候重启项目就会自动编译配置文件了 原文地址:https://www.cnblogs.com/erxiaoouba/p/9040885.html

webstorm下的sass自动编译和移动端自适应实践

http://www.fawwheel.com/shahramLu/p/6477731.html webstorm下的sass自动编译和移动端自适应实践 1.安装Ruby 2.安装sass 3.webstorm配置file watcher 4.移动端自适应 1.安装Ruby 安装Ruby,有多种方式,打开官网下载 因为,使用的是window选择RubyInstall,下载地址 RubyInstall下载地址 选择对应系统的版本,下载完成,安装 添加到path,建议勾上,安装完成后,打开开始面板,

vscode--搭建自动编译sass环境

一,安装插件及使用步骤 1.vscode安装Live Sass Compiler,由于该插件依赖Live Server ,所以会自动安装Live Server 2.点击vscode底部的Watch my Sass 3.按F1键,在输入栏中输入Live Sass: Watch Sass来监听Sass文件( Live Sass: Stop Watching Sass 停止监听文件) 4.同样在输入栏中输入 Live Sass: Compile Sass - Without Watch Mode,就会

webstorm配置scss自动编译路径

webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 点击左上角的File→Settings→File Watchers 在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss ------------------------------------------------------------------------------- Arguments: 可以配置编译后的文件的输出路径,我这里写的是: --n

Ant自动编译打包&amp;发布 android项目

Eclipse用起来虽然方便,但是编译打包android项目还是比较慢,尤其将应用打包发布到各个渠道时,用Eclipse手动打包各种渠道包就有点不切实际了,这时候我们用到Ant帮我们自动编译打包了. 1  Ant自动编译打包android项目 1.1   Ant安装 ant的安装比较简单,下载ant压缩包  http://ant.apache.org  (最新的为1.9.3版本),下载之后将其解压到某个目录(本人解压到E:\Program Files\apache-ant-1.9.3) ,然后配