zoukankan      html  css  js  c++  java
  • sass sublime text 2 gulp ionic

    sass 安装
    1.全局安装 sass 我的Mac 所以不用再安装Ruby ,直接在终端输入

    1 gem install sass

    然后在终端中输入 

    sass -v 

    出现 Sass 3.4.8 (selective steve) ,表示安装成功。
    sass的编译
    1. 使用 sublime text 2
    1.1 preferences-->PackageControl---> 输入 install package ----》输入 SassBuilder 安装插件完成
    1.2 新建项目 ---》新建 my.scss
    1.3 选择 sublime text 2 工具栏中的 tool---->sassbuilder config 然后保存为 .sassbuilder-config 保存到项目的根目录下 ,修改你的 .sassbuilder-config 中的输出生成.css 文件的路径


    1.4 修改my.scss 保存 ,则在 你.sassbuilder-config 中的输出生成.css 文件的路径 下生成了my.css 文件的


    2. 使用 gulp 有点大材小用的样子 O(∩_∩)O~~
    2.1 安装 gulp
    sudo npm install -g gulp
    在终端中输入 gulp -v
    出现 CLI version 3.8.10
    表示安装成功。
    2.2 回到你的新建的项目中 cd /yourproject/, 将gulp 安装到项目的本地
    在终端中输入
    npm install —-save-dev gulp
    2.3 在你的项目中 跟目录下 新建一个 空的 package.json
    2.4 安装你需要的依赖 如
    npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
    2.5 在你的项目中 跟目录下 新建一个 gulpfile.js
    编写你的 任务
    如:

    //包含gulp   
    var gulp = require('gulp');  
    
    //包含我们的插件   
    
    var jshint = require('gulp-jshint');
    var sass = require('gulp-sass');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    var notify = require("gulp-notify");
    
    
    //编译sass  
    
    gulp.task('sass',function(){
        gulp.src('./sass/my.scss')
        .pipe(notify("scss build successful "))
        .pipe(sass())
        .pipe(gulp.dest('./style'));
    });  
    
    //拼接、简化JS文件   
    
    gulp.task('scripts',function(){
        gulp.src('./js/*/js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
    });  
    
    //默认任务   
    gulp.task('default',function(){
        gulp.run('sass','scripts');
    
        //监视我们JS文件的变化   
        gulp.watch('./js/*.js',function(){
            gulp.run('scripts');
        });
    
        //监视scss文件的变化   
        gulp.watch('./sass/*.scss',function(){
            gulp.run('sass');
        });
    });  


    2.6
    在终端中输入
    gulp
    2.7 新建你的sass 文件 保存
    发现在gulpfile.js 中输出.css文件的路径下生成了 编译好的文件;

    3. 

    Koala 

    使用更加简单 

    http://www.cn-sass.com/%E6%95%99%E7%A8%8B/sass-gui-tool-koala.html

    4. ionic sass 编译
    http://learn.ionicframework.com/formulas/working-with-sass/
    如果 在 ionic setup sass 出现了错误 ,你可以看看这个连接
    https://github.com/driftyco/ionic/issues/2241
    主要是你没有安装 gulp 引起的错误 安装一下就可以了

  • 相关阅读:
    [转载]小谈网络游戏同步
    [ASE][Daily Scrum]11.06
    [Proposal]Tank Battle——Infinite
    [proposal][app]Watch your time!
    [Proposal]Nano-Diary(纳日记)
    LaTeX中用BibTex管理参考文献
    matlab化简符号表达式
    placeholder颜色变化
    链接图片外边出现蓝框(IE8/IE9/IE10)
    图标排列
  • 原文地址:https://www.cnblogs.com/xieyier/p/4106038.html
Copyright © 2011-2022 走看看