gulp的使用:
前言:
1、gulp时一种自动化构建工具:生成流文件,减少频繁的IO(生成文件)操作,与webpack的区别:gulp可以看做任务运行器,webpack 可以看做模块打包器;
2、gulp的使用流程一般是这样子的:首先通过gulp.src()方法获取到我们想要处理的文件流,然后把文件流通过pipe方法导入到gulp的插件中,最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中,gulp.dest()方法则把流中的内容写入到文件中
一、下载gulp:
$ cnpm install gulp-cli -g //全局下载gulp;
$ cnpm install gulp -D //局部下载gulp;
$ cnpm init //初始化项目,创建package.js文件;
二、gulp的使用:
1、gulp的基本适合使用: ( gulpfile.js文件中输入代码)
function defaultTask(cb) { //gulpfile.js文件中输入代码;
// place code for your default task here(将你的默认代码任务放到这里)
console.log('第一种写法,写入项目文件')
cb();
}
exports.default = defaultTask
$ gulp
//运行项目命令,如需运行多个任务(task),可以执行 gulp <task> <othertask>
//默认任务(task)将执行;
//var gulp = require('gulp');
//gulp.task('default', function(){
// console.log("另一种写法")
// }
运行结果:
2、配置文件gulpfile.js:
书写格式类似于js
学习要点:gulp的四个API:
gulp.task() 创建任务
gulp.src() 获取
gulp.dest() 写入
gulp.watch() 监听任务
const gulp = require('gulp');
//gulp中插件的应用: 下载插件 ==> 取到插件 ==> 应用插件
var htmlClean = require('gulp-htmlclean'); //压缩html
var imageMin = require('gulp-imagemin'); //压缩图片
var uglify = require('gulp-uglify'); //压缩js文件;
var debug = required('gulp-strip-debug'); //去掉js中的调试语句;
var less = required('gulp-less'); //将less装换为css文件;
var cleanCss = require('gulp-clean-css'); //压缩css文件;
var postCss = require('gulp-postcss'); //css增加前缀;
var autoprefixer = require('autoprefixer');
var connect = require('tulp-connect'); //开启本地服务器;
var folder = { //保存变量,防止文件在生产环境时的名字冲突;
src:"scr/",
dist:'dist/'
}
var devMod = process.env.NODE_ENV == 'development';
//判断当前环境变量是否为开发模式;
// export NODE_ENV=development 也可在命令行设置环境变量为可开发环境;
gulp.task("html", function(){ //创建任务;
var page = gulp.src(folder.scr + "html/*") //取到到当前文件夹src下的所有html文件;
.pipe(connect.reload()) //自动刷新越页面;
if(!devMod){
page.pipe(htmlClean()) //如果是生产环境,压缩html
}
page.pipe(gulp.dest(folder.dist + "html/")) //写入到dist文件夹下的html文件中;
})
gulp.task("image", function(){ //创建任务;
gulp.src(folder.scr + "image/*") //取到到当前文件夹src下的所有iamge文件;
.pipr(imageMin()) //压缩图片;
.pipe(gulp.dest(folder.dist + "image/")) //写入到dist文件夹下的image文件中;
})
gulp.task("css", function(){ //创建任务
var page = gulp.src(folder.scr + "css/*") //取到到当前文件夹src下的所有css文件;
.pipe(connect.reload()) //自动刷新越页面;
.pipe(less()) //将less装换为css;
.pipe(postCss([autoprefixer()])) //增加css前缀;
if(!devMod){
page.pipe(cleanCss()) //如果是生产环境,压缩css;
}
page.pipe(gulp.dest(folder.dist + "css/")) //写入到dist文件夹下的css文件中;
})
gulp.task("js", function(){ //创建任务;
var page = gulp.src(folder.scr + "js/*") //取到到当前文件夹src下的所有js文件;
.pipe(connect.reload()) //自动刷新越页面;
if(!devMod){
page.pipe(debug()) //如果是生产环境,去掉调试语句;
.pipe(uglify()) //如果是生产环境,压缩js;
}
page.pipe(gulp.dest(folder.dist + "js/")) //写入到dist文件夹下的js文件中;
})
gulp.task('server', function(){ //开启本地服务器;
connect.server({
port: '8888', //更改端口号,防止端口冲突;
livereload:ture //livereload变为true,调用可实现自动刷新功能;
})
})
gulp.task('watch', function(){ //监听文件变化 ==> 执行相应任务;
gulp.watch(folder.src + 'html/*', ['html']) //监听html;
gulp.watch(folder.src + 'css/*', ['css']) //监听css;
gulp.watch(folder.src + 'js/*', ['js']) //监听js;
})
gulp.task('default', ['html', 'css', 'js', 'image', 'server', 'watch'])
//监听所有的folder下src文件夹下的多有html文件,当它一改变就执行html任务.(css,js同理)