gulp学习入门一丢丢
来源:互联网 发布:易语言网络游戏源码 编辑:程序博客网 时间:2024/06/12 00:11
1,新建一个文件夹,在当前文件夹打开命令窗口"shift+右键+在此处打开命令行窗口";
2,用的淘宝镜像,cnpm init创建package.json 填写一些项目名称,说明,版本,作者之类的东西就行;
3,创建一个gulpfile.js文件,编辑器打开它,里面来个小任务,我打算将scss文件编译成css文件,需要用到gulp-sass插件和gulp插件,require引入,
var gulp=require('gulp'),sass=require('gulp-sass');
安装插件cnpm install gulp --save-dev
cnpm install gulp-sass --save-dev
4,创建src/css/test.scss,这个是我的scss文件,创建一个任务sass,用gulp.src()找到src/css/test.scss,编译,返回css
gulp.task('sass',function(){
return gulp.src('src/css/test.scss').pipe(sass()).pipe(gulp.dest('src/css'));
})
5,创建默认事件,默认执行‘sass’和'watch1'事件;
gulp.task('default',['sass','watch1']);
6,创建监听事件'watch1',监听'src/css/test.scss',当它change的时候,自动执行'sass'事件,自动编译成css文件
gulp.task('watch1',function(){
return gulp.watch('src/css/test.scss',['sass'])
})
7,启动gulp任务,当前页面打开控制台,gulp sass会执行sass任务;gulp会执行默认任务'default';
接下来我们就可以写scss了,写完之后自动生成一个css;
代码
var gulp=require('gulp'), sass=require('gulp-sass');gulp.task('sass',function(){ return gulp.src('src/css/test.scss') .pipe(sass()) .pipe(gulp.dest('src/css'))})gulp.task('default',['sass','watch1'])gulp.task('watch1',function(){ return gulp.watch('src/css/test.scss',['sass'])})
目录
控制台
- gulp学习入门一丢丢
- 学习之gulp入门
- Gulp基础入门学习
- #学习笔记#gulp配置文件入门
- gulp开发:gulp入门
- gulp学习笔记(一)轻松入门
- gulp入门~
- Gulp入门
- Gulp入门
- gulp入门
- gulp入门
- gulp入门
- gulp 入门
- gulp 入门
- gulp入门
- gulp入门
- gulp入门
- gulp入门
- 科大讯飞技术面——及第一次正式的面试
- 工作小记(未整理)
- CF C. Mahmoud and Ehab and the xor
- Spring RedisTemplate操作-事务操作
- 线程,进程。多进程,多线程。并发,并行的区别
- gulp学习入门一丢丢
- 300.10 杨辉三角
- Android中的坐标系以及获取坐标的方法
- 码云推荐 | 那些优秀的网络爬虫工具介绍
- sublime text3 如何安装corlor theme
- 数据结构笔记•第二章 线性表
- Spring@Autowired注解与自动装配
- 转载:OceanBase容灾方案综述
- Linux系统安装memcache