gulp
了解
首先我们了解一下什么是gulp, gulp是前端自动化构建工具,在开发过程中很多重复的任务，我们都可以正确的使用gulp来完成，gulp基于nodejs,使用gulp可以做很多事情
例如gulp转less语法，js压缩,css压缩,html压缩,下面我大体说一下这个gulp的主流程
gulp
gulp的主流程
- 首先你要安装
nodejs环境. - 全局安装
gulp,然后你每次使用gulp的项目中还要安装一下gulp以及你在项目中所用到的插件也安装好. - 然后你在运行该命令行的目录下新建一个名为
gulpfile.js,并在里面写好配置信息， - 然后再运行
gulp任务就ok了
1.gulp的安装
- gulp安装前的环境配置
- 安装
gulp的前提是你已经经有了nodejs的运行环境， - 查看是否安装了
nodejs,如果输出版本号，说明已经安装了node
- 安装
node -v
- 如果没有安装node，就去官网下载一下安装即可node官方网站
- 以上步骤完成之后，先初始化一下
npm init,然后再全局安装gulp
npm install -g gulp-cli
- 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：
npm install gulp --save-dev
解释一下：--save-dev是package.json文件中的依赖，最好加上
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(){
// 1.
gulp.src('src/css/*.css')
.pipe(cssnano())// 消化，转换，压缩
.pipe(gulp.dest('dist/css'))
})
4.gulp的API
-
gulp.task
- 作用：定义一个任务:
- 示例:
-
gulp.task('任务名', function(){ // 任务内容 })
-
- 执行: 在命令行,gulpfile.js所在目录执行
gulp 任务名
-
gulp.src
- 作用: 匹配到我们想要处理的文件!
- 示例：
-
gulp.task('任务名', function(){ // 如: './style.less' // 如: './*.less' // 如: '*.*' // 当前目录的下所有文件! // 如: **/*.* // 当前目录所有目录下的所有文件 这个参数还可以是一个数组 gulp.src(['./stlyle.less','./test.less','*.*']) gulp.src('路径字符串') .pipe(less()) // 语法转换 .pipe(gulp.dest('文件输出目录')) })
-
-
gulp.dest('文件输出目录')
-
gulp.watch
- 作用：** 监视文件变化然后自动执行相应的任务!,不用每次都要敲命令**
// 我们还自动监视文件变化，然后执行相应任务
gulp.task('mywatch', function(){
// 监视指定文件的变化，如果变化就执行相应的任务!
gulp.watch('src/**/*.*',['mycss','myhtml','myscript','myless'])
})
注意：这里输入的命令行的代码是gulp 任务名，在上面的代码中是gulp mywatch,千万不要和webpack混淆了
- gulp.run
// 我们可以新建一个任务，用这个任务去启动其他任务!
// 如果在命令行输入gulp 会直接执行当前目录的名为default的任务
gulp.task('default' ,function(){
//console.log(1111)
// run方法是用来执行其他任务
// 参数是任务名,如果写成数组形式，那么数组中的元素就是要执行的任务名
gulp.run(['mycss','myhtml','myscript','myless'])
})
假设你有好多文件需要打包，这样做的目的是为了你输入命令的时候，不用再输入好多文件名来执行了，直接输入gulp,就是新建一个任务default，用这个任务去启动其他任务
在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文件要重启我们的任务!