gulp学习笔记
gulp学习笔记
本渣渣来学习gulp了！为什么不用grunt？因为gulp他字短啊！字短..短…..
什么是gulp
在我看来gulp就是一个未完成的人,so.什么是人？有感情有思想的才是人.对了还有肉体.但是这个”未完成的人”给我提供了四个工具
- gulp.src
- gulp.dest
- gulp.task
- gulp.watch
有了这四个工具我就可以拿起锤子打造肉体，拿起斧头打造脑袋…但是..你打造肉体总得有啥材料吧，你做个极品武器不是还要一堆稀有神器材料.so.gulp开发者给我们提供了一大堆的材料,而且你只需要去找一位名叫nodejs的npc接一个名为安装的任务，这位npc就会给你一个npm强化+13的神器.哦不对！是史诗.所以,我们可以在npm找到很多跟gulp有关的插件.没有插件光有个gulp也没啥用啊.
人体实验——打造WEB开发人员
安装gulp
安装到办公室里:
npm install -g gulp
再把他安装到自己办公桌上:
npm install gulp
okay,现在可以在办公桌上进行人体实验了.
获取材料
自动加载
npm install gulp-load-plugins
顾名思义,这份材料可以把我们获得的材料全部放在一个仓库,以后有需要从这个仓库拿就行了,不用缺啥还得重新拿材料
Sass编译
npm install gulp-ruby-sass
我们在进行人体实验的时候要用到天使的翅膀(sass),但是这货是直接拿不下来的,所以我们要用一种名为sass的武器来拿下这对翅膀然后安装到WEB开发人员身上(css)
获得sass 武器还得做个任务才能拿到.
自动刷新
npm install gulp-livereload
每次实验完毕后都需要按一下F5电击按钮才能发现打造后的效果,这样下来太麻烦了.如果我们办公桌是chrome或者FF开发的还得去给办公桌装个(抽屉)[https://chrome.google.com/webstore/detail/jnihajbhpnppcggbcgedagnkighmdlei?utm_source=chrome-app-launcher-info-dialog ]
重载
npm install gulp-nodemon
每次更改人体某个部件后都需要重新启动下人体的大脑.太麻烦了 不如自动启动
办公桌环境
我们办公桌的环境是这样的
- app
-
- build
-
- dev
-
- app.js
-
- index.html
- gulpfile.js
我们把办公桌分成几块app这是一个大块build是app这块中的一小块dev是app这块中的一小块app.js是这app中的大脑index.html是这app中的贴膜(装饰办公桌桌面的)gulpfile.js占了我们办公桌另一块
开始制作
拿起gulp神器
var gulp=require("gulp");
获取自动加载材料
要引用插件得通过 plugins.xxx这种形式 并且以驼峰式命名
var plugins=require("gulp-load-plugins")();
设置办公桌路径,让gulp能够找到需要打造的地点
//设置js文件路径
var jsPath={
dev:"app/dev/css/*.scss",
build:"app/build/css"
}
//设置自动加载文件路径
var reloadMain="app/app.js"
开始给gulp神器添加任务 让神器来自动完成
在控制台不带用参数就单纯输入gulp默认会执行default任务然后default任务又通知watchSass和reload让这两货起床
gulp.task("default",["watchSass","reload"]);
让Sass史诗武器来拿去天使翅膀
监听”app/dev/css/*.scss”路径下所有.scss文件 一但有变动就调用sass:compile任务
gulp.task("watchSass",function(){
//需要在监听文件之前调用一下livereload.listen();
plugins.livereload.listen();
gulp.watch(jsPath.dev,["sass:compile"])
})
给Sass武器加上特效duang
调用sass编译功能ruby.Sass(path,opt).pipe是武器中的骨架 你所输入的灵力都是通过骨架来传输的并且传输完毕后你的灵力不会消失通俗来讲就是无限流,你可以创建多个pipe 第一个pipe用来处理你的灵力速度,第二个pipe用来处理你的灵力数量 压缩你的灵力gulp.dest用来输出文件 你的灵力可以外放了！
gulp.task("sass:compile",function(){
//Sass编译 输出压缩后的style文件
plugins.rubySass(jsPath.dev,{style:"compressed"})
.on("error",function(err){console.log(err)})
.pipe(gulp.dest(jsPath.build))
//自动重启浏览器 配合 chrome插件使用
.pipe(plugins.livereload())
})
自动重载办公桌
当你更改办公桌某个重要的地方时,比如app.js,你就可以利用nodemon这把武器来处理了
//当app.js文件变动自动重启
gulp.task("reload",function(){
plugins.nodemon({
script: reloadMain //重启主文件
, ext: 'js html' //附加监听文件类型
, env: { 'NODE_ENV': 'development' }//附加参数
, watch:[reloadMain]//仅仅监听主文件变动
})
})