只搞 sass
接上一篇 点我点我 https://notes/16270/1ae3f0cd6d17b73f3818b1c7403861c2.html
1. 安装 nodejs
2. 打开 cmd 命令窗,
3. 进入到项目的根目录下 比如 project
4. 手动在这个根目录下创建 gulpfile.js 文件 (内容 如下)
html 代码
- // 引入 gulp
- var gulp = require('gulp');
- var sass = require('gulp-sass');
- gulp.task('sass',function(){
- return gulp.src('stylesheets/**/*.sCSS') //scss 存放的目录是 stylesheets 下
- .pipe(sass())
- .pipe(gulp.dest('dist/css')); //css 编译到 dist 目录下
- });
- gulp.task('watch',function(){
- gulp.watch('stylesheets/**/*.scss',['sass']) // 监听 stylesheets 下的 scss, 执行 sass 方法
- });
- gulp.task('default',['watch'],function(){ //cmd 运行 gulp 自动监听 watch
- console.log('ok');
- });
5. 根目录 project 下安装 gulp 和 sass,
- npm install gulp --save-dev // 局部安装
- npm install gulp-sass --save-dev // 安装 sass
6. 运行 gulp, 即可自动编译 scss 文件
- gulp // 运行 gulp, 自动监听 watch 方法, 再运行 sass
- project(项目名称)
|-node_modules 组件目录
|-dist 发布环境
|-css 样式文件 (style.css)
|-images 图片文件 (压缩图片)
|-js js 文件 (main.js main.min.js)
|-index.html 静态文件 (压缩 html)
|-stylesheets 生产环境
|-sass sass 文件
|-gulpfile.js gulp 任务文件
- @mixin font-dpr($font-size)
- {font-size: $font-size;
- [data-dpr="2"] & {
- font-size: $font-size 2;}
- [data-dpr="3"] & {
- font-size: $font-size 3;}
- }
- .aaaa{@include font-dpr(14px);}
来源: http://www.qdfuns.com/article/16270/370389107ec25bbf78655853d581f781.html