gulp的基本使用
gulp的使用和grunt很类似,但gulp的语法更类似编写代码,看起来更容易令人明白.所以个人比较喜欢用gulp.
1.gulp的安装
- 先看看是否安装了nodejs,如果输出版本号，说明已经安装了node
node -v
- 如果没有安装node，就去官网下载一下安装即可node官方网站
- 以上步骤完成之后，先初始化一下
npm init,然后再全局安装gulp
npm install -g gulp-cli
- 全局安装gulp后，把目录切换到你的项目文件夹中，然后在命令行中执行：
npm install gulp --save-dev
解释一下：--save-dev会在package.json文件中的devDependencies中加上gulp，最好加上
2.使用gulp
- 安装完之后就是如何使用了，先在你这个目录下新建一个
gulpfile.js的文件，里面写我们定义的任务，例如以下代码是对less转换为css的
注意：你可以自己起一个任务名，运行的时候，直接在命令行输入
gulp 任务名，gulp也给我们定义了一个默认任务名default,如果任务名为
default,直接在命令行输入gulp即可
//先引入包
const gulp = require('gulp')
const less = require('gulp-less')
// 定义任务对less进行转换,myless是你自己定义的任务名
gulp.task('myless', function() {
// 1.匹配到要处理的文件，目录src/less/*.less下的所有后缀名为`.less`的所有文件
gulp.src('src/less/*.less')
// 2.对less语法进行转换!
.pipe(less())
// 3.指定文件的输出目录dist/css
.pipe(gulp.dest('dist/css'))
})
3.gulp常用的插件
3.1 转换less语法
- 安装
npm install gulp-less --save-dev
const less = require('gulp-less')
// 定义任务对less进行转换,myless是你自己定义的任务名
gulp.task('myless', function() {
// 1.匹配到要处理的文件，目录src/less/*.less下的所有后缀名为`.less`的所有文件
gulp.src('src/less/*.less')
// 2.对less语法进行转换!
.pipe(less())
// 3.指定文件的输出目录dist/css
.pipe(gulp.dest('dist/css'))
})
3.2 对 js 语法进行压缩和混淆
- 安装
npm install gulp-uglify --save-dev
const uglify = require('gulp-uglify')
// 对js请求进行压缩和混淆
// 定义任务
gulp.task('myscript', function() {
// 1.匹配要处理的文件
gulp.src('src/js/*.js')
// 2.将js代码压缩混淆
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
3.3 对html代码进行压缩
- 安装
npm install gulp-htmlmin --save-dev
// 对html进行压缩的包
const htmlmin = require('gulp-htmlmin')
// 对html进行压缩
// 定义任务
gulp.task('myhtml', function(){
// 1.匹配到要处理的html文件
gulp.src('src/*.html')
// 2.对html进行压缩!
.pipe(htmlmin({
collapseWhitespace:true // 去除空白符
}))
// 3.输出
.pipe(gulp.dest('dist'))
})
3.4 对css进行压缩
- 安装
npm install gulp-cssnano --save-dev
const cssnano = require('gulp-cssnano')
// 定义任务
gulp.task('mycss', function(){
gulp.src('src/css/*.css')
.pipe(cssnano())// 消化，转换，压缩
.pipe(gulp.dest('dist/css'))
})
4.gulp的API
4.1 gulp.task
- 作用：定义一个任务:
- 示例:
gulp.task('任务名', function(){
// 任务内容
})
- 执行: 在命令行,gulpfile.js所在目录执行
gulp 任务名
4.2 gulp.src
- 作用: 匹配到我们想要处理的文件!
- 示例：
gulp.task('任务名', function(){
// 如: './style.less'
// 如: './*.less'
// 如: '*.*' // 当前目录的下所有文件!
// 如: **/*.* // 当前目录所有目录下的所有文件
这个参数还可以是一个数组
gulp.src(['./stlyle.less','./test.less','*.*'])
.pipe(less()) // 语法转换
.pipe(gulp.dest('文件输出目录'))
})
4.3 gulp.watch
- 作用： 监视文件变化然后自动执行相应的任务!,不用每次都要敲命令
// 我们还自动监视文件变化，然后执行相应任务
gulp.task('mywatch', function(){
// 监视指定文件的变化，如果变化就执行相应的任务!
gulp.watch('src/**/*.*',['mycss','myhtml','myscript','myless'])
})
注意：这里输入的命令行的代码是
gulp 任务名，在上面的代码中是gulp mywatch
4.4 gulp.run
// 我们可以新建一个任务，用这个任务去启动其他任务!
// 如果在命令行输入gulp 会直接执行当前目录的名为default的任务
gulp.task('default' ,function(){
//console.log(1111)
// run方法是用来执行其他任务
// 参数是任务名,如果写成数组形式，那么数组中的元素就是要执行的任务名
gulp.run(['mycss','myhtml','myscript','myless'])
})
假设你有好多文件需要打包，这样做的目的是为了你输入命令的时候，不用再输入好多文件名来执行了，直接输入
gulp,就是新建一个任务default，用这个任务去启动其他任务
4.5 在gulp中也可以使用browser-sync
- 需要在当前项目目录安装:
npm install browser-sync --save-dev
这时候想把gulp和browser-sync合成一个命令，只能是把browser的命令省掉，用gulp来代替，那么命令省掉了，最终就要换成代码，如下所示
//启动boswerSync服务
browserSync.init({
server:"./src", //指定网站目录，访问时不需要 ，就是帮你自动刷新浏览器http://localhost:3000/后面
//的目录，可以省略不写,*这里的路径一定要写对*
files:["./src/**/*.*"]
})
- 和watch合起来的代码：
//这个broserSync是自动帮你刷新浏览器
const browserSync = require('browser-sync')
//我们还自动监视文件变化，然后执行相应任务
gulp.task("mywatch",function(){
//启动boswerSync服务
browserSync.init({
server:"./src", //指定网站目录，访问时不需要
//输入这个目录(网站根目录就是端口号后面的目录的父级)
files:["./src/**/*.*"]
})
// 监视指定文件的变化，如果变化就自动执行相应的任务（想监视谁，就在数组里写谁）
gulp.watch('src/**/*.*',['myless'])
})
注意:如果更改了gulpfile.js文件要重启我们的任务!
浙公网安备 33010602011771号