gulp构建sass开发环境
来源:互联网 发布:英语口语书籍推荐 知乎 编辑:程序博客网 时间:2024/06/03 20:49
首先全局安装 gulp命令
npm install gulp -g
然后构建项目目录:
- app 用于存放scss文件
- dist 用于存放生成的css文件
- gulpfile.js 需要自己创建,用于处理gulp命令
然后在项目中安装gulp 和 gulp-sass
cnpm install gulp
cnpm install gulp-sass --save -dev
这里安装gulp-sass最好用cnpm ,因为有可能被墙或者因为python 版本不兼容而导致错误
所以最好用cnpm 安装,安装完成是这个样子的。
然后来编写gulpfile.js文件,这里是参照npm官网的写法,但是没有用严格模式
https://www.npmjs.com/package/gulp-sass
var gulp = require('gulp'); // 引入依赖包var sass = require('gulp-sass'); //引入依赖包gulp.task('sass', function(){ //sass()方法用于转换sass到css return gulp.src('./app/*.scss') //执行sass文件的路径 .pipe(sass()) // 将Sass转换为带有gulp-Sass的CSS .pipe(gulp.dest('./dist')) //输出css文件的路径});//执行gulp 命令的入口gulp.task('sass:watch', function(){ gulp.watch('./app/*.scss', ['sass']); // 监听指定路径的sass文件并编译})
最后:编译是实时编译的噢,所以可以一边修改一边编写sass代码
gulp watch
阅读全文
0 0
- gulp构建sass开发环境
- gulp构建前端自动化开发环境
- gulp环境下安装sass
- Gulp入门之自动化构建Sass
- gulp构建前端环境
- 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
- 自动化构建工具gulp环境搭建整理
- 搭建es6+gulp开发环境
- 使用gulp编译sass
- gulp sass安装步骤
- gulp + sass + webstrom
- sass与gulp应用
- 前端开发构建工具---Gulp介绍
- 使用gulp构建自动化流程开发
- gulp构建
- gulp构建
- 使用gulp实时编译sass/sass
- Less 和 Sass 及其开发环境
- tow weeks vim(8)
- 数据库事务的四大特性以及事务的隔离级别
- VBA 声明 Option Explicit,让代码更规范
- 华为OJ——矩阵乘法计算量估算
- NOI2015 Day2 T1 荷马史诗(洛谷P2168)
- gulp构建sass开发环境
- mysql 开发规范
- Solr从myslq批量导入数据
- POJ3061 -- Subsequence(尺取法)
- Shopping_数据库——购物系列
- rest server
- CSDN删除自己上传的资源
- 2017 Multi-University Training Contest
- 【HDU