本篇文章讲述的是gulp的用法有哪些，我们该如何的快速的去记忆gulp的用法，大家对gulp的用法不太了解的同学我们可以一起来看看本篇文章！
行文步骤：
1、怎么安装
2、怎么使用
一、怎么安装
首先你得在自己的电脑中安装nodejs，应为gulp的运行是基于nodejs环境的。
安装完成后，直接npm install gulp -g.(如果不能理解这句代码请百度吧)安装完成后你可以直接在cmd窗口调用gulp功能。
二、怎么使用
gulp的作用？
我们构建一个项目，名称叫app，里面有css文件夹、js文件夹、image文件夹和html文件。通常文件夹中的文件会有空格和注释，这些文件传输起来相对比较大，传输效率地下。于是我们要对这些文件进行压缩处理就会用到gulp。
gulp怎么用？
1、直接在项目目录下建一个gulpfile.js文件，然后在cmd窗口运行相应命令可以执行gulpfile.js。
例如我要编译一个js文件，app文件结构如下:
接下来我们开始写gulpfile文件：
var gulp = require('gulp');//引入gulp模块var uglify = require('gulp-uglify');//引入gulp-uglify模块，用来压缩js文件。如果要压缩css文件就要引入gulp-minify-css模块。这些模块都要通过npm包管理器来安装。安装之后app文件中会自动出现一个叫node_modules的文件夹。如果你在全局安装了gulp，这里建议你进入到该项目文件夹再安装一次，避免后面gulp更新之后影响文件运行。//执行压缩任务。创建一个名为script的任务(随意取名)，在cmd中输入gulp script会执行该任务，即运行后面的function功能gulp.task('script',function(){ gulp.src('js/*.js')//获取文件地址 .pipe(uglify())//执行编压缩功能。如果是压缩css则把来自于gulp-uglify的uglify()方法转换成gulp- minify-css模块中的minifyCSS功能。 .pipe(gulp.dest('dist/js'));//输出文件位置，在dist文件夹下的js文件夹内。如果项目中不存在dist的文件，会自动创建。})//编译完成，如果我们修改原js文件，要使压缩文件也自动改变怎么办。这个时候我们就要对原js文件进行监听，如果发现有改动则重新编译。代码如下：//执行监听任务gulp.task('auto',function(){// 创建一个监听任务。 //监听文件修改，当文件被修改则执行script人物 gulp.watch('js/*.js',['script']);//第一个参数表示监听的文件，第一个参数表示重新执行script人物。})//所有的任务要在cmd中输入gulp+任务名后才能执行。这样不太方便，可不可以在定义任务，它的作用就是执行执行之后可以执行所有的人物。//有，如下：//gulp.task('default')定义默认任务//在命令行使用gulp启动script任务和auto人物gulp.task('default',['script','auto']);//这样我们直接在cmd中输入gulp就会执行script和auto这两个任务。
登录后复制
总结以下gulp的功能：
gulp.task(‘任务名’,function(){})定义一个任务
gulp.src()//找到当前的文件地址
gulp.desk()//输出文件
gulp.pipe()//可以理解为管道，将操作加入到加入到执行队列。
三、其它文件压缩或编译(对比js即可)
1、编译css文件
块名称：gulp-minify-css
压缩文件函数:minifyCSS
2、压缩图片
块名称:gulp-imagemin
压缩文件函数：imagemin({progressive})
3、编译less
块名称:gulp-less
编译方法:less();
四、使用gulp构建一个项目
1、cmd中创建 package.json配置文件，其中有你的依赖包信息。
安装相应模块，模块名称会被添加到package.json当中。
2、设计目录结构
将文件分为2类dist/目录下是压缩后的代码，src/下是源码文件。
如何让gulp自带的输出带有时间和颜色，gulp-util 具有同样的效果，不过其颜色效果更丰富。 引入模块gulp-util
var gutil = require('gulp-util');gulp.task('default',function(){ gutil.log('message') gutil.log(gutil.colors.red('error')) gutil.log(gutil.colors.green('message')+'some')})
登录后复制
这里强调以下，gulp操作必须进入到项目文件夹即node_modules文件夹所在界面才能在cmd窗口执行gulp操作。
4、怎样配置js文件
上面的写法有一个问题，只要有一个js文件被修改那么所有的js文件都会被重新编译。
我们只想编译被修改的文件怎么办？
使用gulp-watch-path
//引入模块:var watchPath = require('gulp-watch-path');//设置一个监听js文件的人物watchjsgulp.task('watchjs',function(){ gulp.watch('src/js/**/*.js',function(event){ var paths = watchPath('event','src/','dist/')//监听所有的js文件，有一个文件发生改变，则返回一个对象，该对象包含被修改js文件的相关属性。 /* paths对象的结构如下:{srcPath:'src/js/log.js', distPath:'dist/js/log.js', distDir:'dist/js/', srcFilename:'log.js', distFilename:'log.js'} */ gulp.src(paths.srcPath) .pipe( uglify()) .pipe(gulp.dest(paths.distDir))})})
登录后复制
如果我们在编辑源码的时候出现格式错误，怎么输出这种错误?使用stream-combiner2
var handleError = function (err) {var colors = gutil.colors;console.log('')gutil.log(colors.red('Error!'))gutil.log('fileName: ' + colors.red(err.fileName))gutil.log('lineNumber: ' + colors.red(err.lineNumber))gutil.log('message: ' + err.message)gutil.log('plugin: ' + colors.yellow(err.plugin))}var combiner = require('stream-combiner2')gulp.task('watchjs', function () {gulp.watch('src/js/**/*.js', function (event) {var paths = watchPath(event, 'src/', 'dist/')var combined = combiner.obj([gulp.src(paths.srcPath),uglify(),gulp.dest(paths.distDir)])combined.on('error', handleError)})})
登录后复制
压缩后的代码不存在换行符和空白符，导致出错后很难调试，好在我们可以使用 sourcemap 帮助调试
var sourcemaps = require('gulp-sourcemaps')// ...var combined = combiner.obj([gulp.src(paths.srcPath),sourcemaps.init(),uglify(),sourcemaps.write('./'),gulp.dest(paths.distDir)])// ...
登录后复制
此时 dist/js/ 中也会生成对应的 .map 文件，以便使用 Chrome 控制台调试代码
gulp-autoprefixer–解析 CSS 文件并且添加浏览器前缀到CSS规则里。在编译的时候会添加这些前缀
gulp.task('watchcss', function () {gulp.watch('src/css/**/*.css', function (event) {var paths = watchPath(event, 'src/', 'dist/')//用于检测被修改的文件，返回一个对像，该对象包含一些关于被修改文件的属性。gulp.src(paths.srcPath)//获取文件地址.pipe(sourcemaps.init())//初始化对象，便于后面生成该文件的.map文件.pipe(autoprefixer({browsers: 'last 2 versions'}))//添加前缀.pipe(minifycss())//执行压缩功能.pipe(sourcemaps.write('./')).pipe(gulp.dest(paths.distDir))//输出文件})})
登录后复制
相关推荐：
gulp的入门必知
以上就是gulp用法快速记忆的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2783093.html
