1. 安装nodeJs
 
2. 全局安装gulp: npm install gulp -g
 
3. 在cmd切换至项目文件夹下 npm init,创建package.json文件(JSON文件内不能写注释)
{
  "name":"test",   //项目名称(必须)
  "version":"1.0.0",   //项目版本(必须)
  "description":"This is for study gulp project !",   //项目描述(必须)
  "homepage":"",   //项目主页
  "repository":{    //项目资源库
    "type":"git",cd
    "url":"https://git.oschina.net/xxxx"
  },
  "author":{    //项目作者信息
    "name":"surging",
    "email":"surging2@qq.com"
  },
  "license":"ISC",    //项目许可协议
  "devDependencies":{    //项目依赖的插件
    "gulp":"^3.8.11",
    "gulp-less":"^3.0.0"
  }
}
 
4.项目根目录下本地安装gulp插件: npm install gulp-ruby-sass --save-dev
 
5.新建gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
 
gulp.task('default', ['watch']);
 
// 编译sass
gulp.task('sass', function(){
    return sass('scss/*.scss')
        .on('error', sass.logError)
        .pipe(gulp.dest('css/'));
});
 
// 自动监听
gulp.task('watch', function(){
    gulp.watch('scss/*.scss',['sass']);
});
 
6.在项目根目录下运行:gulp或者gulp default
 
ps:项目文件结构

gulp安装使用的更多相关文章

  1. Gulp安装及配合组件构建前端开发一体化

    原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3 ...

  2. windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)

    以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  3. gulp安装和使用简介

    一. gulp和grunt对比 grunt目前的工作流程:读文件.修改文件.写文件——读文件.修改文件.写文件——... gulp目前的工作流程:读取文件——修改文件——修改文件...——写文件 二. ...

  4. Gulp安装使用教程

    题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs ...

  5. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

  6. gulp安装及使用流程

    1. 安装nodejs 去 https://nodejs.org/en/下载安装文件安装即可. 安装完成后,在终端输入node -v回车打印出nodejs的版本号,说明nodejs安装成功. 在终端输 ...

  7. gulp安装+一个超简单入门小demo

    gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js. ...

  8. Gulp安装及配合组件构建前端开发一体化(转)

    Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...

  9. gulp安装成功但是无法使用

    gulp安装正常,但是查看gulp -v和使用gulp的时候报错, 原因:缺少环境变量或环境变量错误. 查找环境变量的方法:在dos下输入npm config get prefix就会显示一个地址,这 ...

  10. gulp安装说明

    1.安装node-v6.3.0-x64,安装成功后再点击node-v6.3.0-x64卸载(点击remove). 2.安装node-v4.4.7-x64. 3.打开cmd命令行,输入node -v,查 ...

随机推荐

  1. 【R笔记】R语言中的字符串处理函数

    内容概览 尽管R是一门以数值向量和矩阵为核心的统计语言,但字符串同样极为重要.从医疗研究数据里的出生日期到文本挖掘的应用,字符串数据在R程序中使用的频率非常高.R语言提供了很多字符串操作函数,本文仅简 ...

  2. golang的reflect

    引用自 http://www.jb51.net/article/115002.htm 和 C 数据结构一样,Go 对象头部并没有类型指针,通过其自身是无法在运行期获知任何类型相关信息的.反射操作所需要 ...

  3. Linux下使用xargs将多行文本转换成一行并用tr实现逗号隔开

    准备: cat test.txt 示例: cat test.txt | xargs 可以看出得到的字符串为空格隔开的. 再把上面的字符串用逗号隔开,可以使用tr命令进行空格的替换 cat test.t ...

  4. High Speed Inter-CHIP USB 2.0 PHY

    转载:http://arasan.com/products/usb/usb-2-0/hsic-phy/ High Speed Inter-CHIP USB 2.0 PHY USB is the ubi ...

  5. jquery--动态篇

    jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

  6. cs-Panination

    ylbtech-Unitity: cs-Panination Pager.cs IPagingOption.cs IPagedList.cs PagingOption.cs PagedList.cs ...

  7. opengl中VAO,VBO,IBO用法小结(zz) 【转】

    http://cowboy.1988.blog.163.com/blog/static/751057982014380251300/ opengl中VAO,VBO,IBO用法小结 这三个玩意全面取代旧 ...

  8. ngrinder安装

    1.源码编译和部署 官网:http://naver.github.io/ngrinder/ 下载源码后,存在部分依赖库不在maven的远程仓库中,这是可以用下载jar包后,用以下命令打包到本地仓库: ...

  9. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何让不同的PLC程序分线程运行 TC3

    右击Tasks,添加一个新的Task   可以为这个线程设置自定义的扫描周期   然后在项目上右击添加Referenced Task   在TaskSub1上右击添加现有项,把之气写好的PRG程序绑定 ...

  10. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面如何自动运行,不让用户干涉,设置起始界面

    右击视图管理器,添加一个TargetVisualization   在起始视图中点击右边的按钮,然后选择一个HMI作为起始HMI     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: h ...