gulp搭建的项目完美编译sass
来源:互联网 发布:java权限框架有几种 编辑:程序博客网 时间:2024/06/05 00:33
1.1全局安装gulp
在已安装node的情况下,执行命令npm install gulp -g
1.2检测gulp是否安装成功
执行gulp -v 显示版本号即安装成功
2.1项目文件根目录新建package.json, 进入项目文件夹中
执行命令npm init
2.2检测package.json是否成功新建
注:可不使用cnpm init方式,可选择手动创建package.json配置文件
3.1本地安装gulp插件
进入你的项目文件路径中后,执行cnpm install gulp --save-dev
注:项目文件中多了 node_modules 文件夹,里面是你本地安装的插件
3.2安装gulp-sass插件
进入你的项目文件路径中后,执行cnpm install gulp-sass --save-dev此时package.json文件会自动更新依赖包!
4.1新建gulpfile.js(这一步需要自己新建和js文件)
gulpfile.js是gulp的配置文件,放于根目录中。
var gulp = require('gulp');var sass = require('gulp-sass');gulp.task('sass', function() { return gulp.src('src/scss/*.scss') //获取该任务需要的文件 .pipe(sass()) //该任务调用的模块 .pipe(gulp.dest('src/css/css')); //将在 src/css 文件夹中生产test.css}); // 默认任务gulp.task('default',['sass','watch1']);//监听文件gulp.task('watch1',function(){ return gulp.watch('src/scss/*.scss',['sass']); //监听 src/css/.scss 文件,修改时自动执行 sass 任务。})//监听/
图片的文件目录如下
5.1运行gulp
执行gulp sass命令,执行gulpfile.js中的sass任务
5.2执行gulp 调用default中的所有任务,开启监听事件,当 src/css/test.scss 发生修改时,会自动执行sass任务
就成功喽~~!
阅读全文
2 0
- gulp搭建的项目完美编译sass
- 使用gulp编译sass
- 使用gulp实时编译sass/sass
- gulp-sass编译无输出
- windows下安装gulp-sass编译不过去报错的解决方案;
- 使用gulp-sass 和 gulp-livereload 自动编译sass文件
- 使用gulp+browser-sync搭建Sass自动化编译以及自动刷新
- gulp-ruby-sass与gulp-sass的区别
- gulp学习之四------编译 SASS
- gulp自动监视Sass编译css
- Gulp入门:从安装到编译Sass
- 使用gulp编译 sass和less
- gulp项目搭建
- gulp 搭建项目
- gulp项目搭建流程
- 本地编译 gulp 项目
- 关于安装gulp-sass失败的问题解决
- webpack搭建的vue-cli项目如何使用sass?
- ionic第三方QQ,微博,微信的登录,分享功能的实现和注意事项
- [ssh]关于ssh中查询并分页方法的记录
- 解决IllegalStateException: Can not perform this action after onSaveInstanceState
- Mac 升级python2.7 到 3.5
- java的GC机制--java的内存分配机制
- gulp搭建的项目完美编译sass
- 网络状态码含义
- Java学习笔记---自动拆装箱
- Oxygine引擎简介及课程项目总结
- 解码
- 一个不小心引发的Heap corruption
- MySQL入门--插入记录的时候NULL与NOT NULL
- 48. Rotate Image(数学矩阵相关知识)
- Python学习笔记(8) -- 多个数求和(关键词:reduce)