pedl中文模组网站,网站批量创建程序,百度权重排名,棋牌推广方法1.gulp是什么#xff1f; gulp是前端开发过程中一种基于流的代码构建工具#xff0c;是自动化项目的构建利器#xff1b;她不仅能对网站资源进行优化#xff0c;而且在开发过程中很多重复的任务能够使用正确的工具自动完成#xff1b;使用她#xff0c;不仅可以很愉快的编…1.gulp是什么 gulp是前端开发过程中一种基于流的代码构建工具是自动化项目的构建利器她不仅能对网站资源进行优化而且在开发过程中很多重复的任务能够使用正确的工具自动完成使用她不仅可以很愉快的编写代码而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成并监听文件在改动后重复指定的这些步骤。在实现上她借鉴了Unix操作系统的管道pipe思想前一级的输出直接变成后一级的输入使得在操作上非常简单。 官网http://gulpjs.com/ 中文网 http://www.gulpjs.com.cn/ 插件http://gulpjs.com/plugins/ Gitbookhttps://wizardforcel.gitbooks.io/gulp-doc/content/2.html 2.优点 1.1.1 易于使用 通过代码优于配置的策略gulp 让简单的任务简单复杂的任务可管理。 1.1.2 构建快速 利用 Node.js 流的威力你可以快速构建项目并减少频繁的 IO 操作。 1.1.3 易于学习 通过最少的 API掌握 gulp 毫不费力构建工作尽在掌握如同一系列流管道。 1.1.4 插件高质 gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 3.gulp开始 (1)全局安装npm  install  –g  gulp (2)安装到本地 npm install gulp –save-dev (3)在项目根目录新建gulpfile.js (4)编写文件内容并运行 var gulp require(gulp); gulp.task(default,function(){console.log(hello world); }); (5)运行 在根目录下打开命令窗口输入gulp即可 默认运行gulpfile.js文件 4.globs语法 匹配符 说明 * 匹配文件路径中的0个或多个字符但不会匹配路径分隔符除非路径分隔符出现在末尾 ** 匹配路径中的0个或多个目录及其子目录,需要单独出现即它左右不能有其他东西了。如果出现在末尾也能匹配文件。 ? 匹配文件路径中的一个字符(不会匹配路径分隔符) [...] 匹配方括号中出现的字符中的任意一个当方括号中第一个字符为^或!时则表示不匹配方括号中出现的其他字符中的任意一个类似js正则表达式中的用法 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次类似于js正则中的(pattern|pattern|pattern)? (pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次类似于js正则中的(pattern|pattern|pattern) *(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次类似于js正则中的(pattern|pattern|pattern)* (pattern|pattern|pattern) 匹配括号中给定的任一模式1次类似于js正则中的(pattern|pattern|pattern)   下面以例子来加深理解 * 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js *.* 能匹配 a.js,style.css,a.b,x.y */*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js ** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件 **/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录 ?.js 能匹配 a.js,b.js,c.js a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符 [xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符 [^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js Globs语法是匹配文件夹和文件路径的和正则表达式类似但是语法有区别作用没有正则表达式强大 5.gulp核心api 1gulp.task   如果task的名称为default默认执行该任务不执行其他任务   如果要执行某个指定任务输入gulp 任务名 任务依赖 如果任务相互之间没有依赖任务就会按你书写的顺序来执行如果有依赖的话则会先执行依赖的任务。但是如果某个任务所依赖的任务是异步的就要注意了gulp并不会等待那个所依赖的异步任务完成而是会接着执行后续的任务。   第二个参数是任务的字符串数组就是启动其他任务的作用这几个任务是同时启动但是谁先执行完得看任务里面的工作量不是看启动任务的顺序 gulp.task(default,[a,b,c],function(){console.log(默认任务) }); gulp.task(a,function(){console.log(a任务) }); gulp.task(b,function(){console.log(b任务) }); gulp.task(c,function(){console.log(c任务) }); gulp.task(default,[a,b],function(){ console.log(默认任务) }); gulp.task(a,function(){ console.log(a任务) }); gulp.task(b,function(){ setTimeout(function(){console.log(b任务) },3000) }); //执行过程先执行default同时启动了a、b任务再执行回调的console.log(默认任务)但是b任务是异步任务所以执行结果是 a 默认任务 b 如果想要a  b任务执行完后再执行default任务该怎么办 有三种方法可以实现   注意推荐以后都在gulp.src前面写return    2gulp.src  多文件 3gulp.dest 用gulp.dest()把文件流写入文件后文件流仍然可以继续使用。 4gulp.watch 6.插件 1del:删除文件夹和文件 https://github.com/sindresorhus/del 2gulp-concat合并js文件 https://github.com/contra/gulp-concat 3gulp-concat-css合并css文件 https://github.com/mariocasciaro/gulp-concat-css 4gulp-uglify压缩js文件 https://github.com/terinjokes/gulp-uglify 5gulp-cssnano:压缩css https://github.com/ben-eb/gulp-cssnano 6gulp-rename:重命名文件 https://github.com/hparra/gulp-rename 7gulp-minify-html压缩页面 https://github.com/sanfords/gulp-minify-html 8gulp-imagemin压缩图片 https://github.com/sindresorhus/gulp-imagemin 9gulp-open:自动打开浏览器 https://github.com/stevelacy/gulp-open 10gulp-notify任务完成会自动提示然后提示语消失 https://github.com/mikaelbr/gulp-notify 11gulp-load-plugins:依赖自动加载(自动加载依赖插件的插件) https://github.com/jackfranklin/gulp-load-plugins 12gulp-livereload自动刷新页面 https://github.com/vohof/gulp-livereload 类似插件browser-sync(是一个大型的插件) 13gulp-useref有了这个插件concat和gulp-concat插件就可以不用了 14gulp-sass:处理sass文件 15gulp-autoprefixer自动处理前缀    -moz火狐       -o欧朋        -webkit苹果和谷歌        -ms IE 16gulp-sequence var runSequence require(run-sequence); gulp-sequence:处理复杂的任务依赖问题控制任务的启动简化了任务的依赖关系  注意       *:这个插件中写的任务得用cb或者是返回文件流       *:简化了任务的依赖关系,控制了任务的启动流程 gulp.task(sequence,function(cb){gulpSequence(clean,[js,html,css,images],task1,task2);//执行流程先执行clean不管这个任务多大都必须等它先执行完 //之后同时启动js,html,css,images都执行完后再启动task1 //执行完后再启动执行task2 }) 17gulp-html-replace           一个完整的gulpfile.js /*** gulp的默认配置文件在这面写gulp的任务*/ var gulp require(gulp) // 删除文件和文件夹插件 var del require(del) // 合并js插件 var concat require(gulp-concat) // 压缩混淆js插件 var uglify require(gulp-uglify) // 合并css插件 var concatCss require(gulp-concat-css) // 压缩css插件 var cssnano require(gulp-cssnano) // 重命名插件 var rename require(gulp-rename) // 压缩html插件 var minifyHTML require(gulp-minify-html) // 压缩图片插件 var imagemin require(gulp-imagemin) // 自动打开浏览器插件 var open require(gulp-open) // 消息通知插件 var notify require(gulp-notify) // 处理复杂的任务依赖问题 var gulpSequence require(gulp-sequence) // 处理sass文件 var sass require(gulp-sass); // 自动增加前缀 var autoprefixer require(gulp-autoprefixer) // 有了这个插件concat和gulp-concat插件就可以不用了 var userefrequire(gulp-useref)// 1、名称如果叫default那么这就是一个默认任务了当你在一个命令窗口运行的gulp命令的时候他会自动去找gulpfile.js文件中任务名称叫default的任务去执行 // 2、指定某一个任务去执行命令就是gulp任务名 // 3、第二个参数是一个任务的字符串数组作用就是启动数组中相同名称的任务不过这几个任务是同时启动的谁先执行完得看任务里面的工作量而不是按照顺序执行完毕// 开发任务配置//// 定义开发配置 gulp.task(develop, [sequence], function () {gulp.src(dist/index.html).pipe(open({app: chrome})).pipe(notify(项目构建完成)) });// 定义文件变化的监听任务 gulp.task(watch, function () {// 一般在开发中这里要执行的是类似于scsslesses6之类的监听构建gulp.watch(src/js/*.js, [js])gulp.watch(src/css/*.css, [css])gulp.watch(src/scss/*.scsss, [scss,css])gulp.watch(src/*.html, [html]) })// brower-sync// 部署任务配置// // 定义部署配置 gulp.task(build, [sequence], function () {gulp.src(dist/index.html).pipe(open({app: chrome})).pipe(notify(项目构建完成)) });gulp.task(sequence, function (cb) {// 1、这个插件中写得任务得用cb或者是返回文件流// 2、简化了任务的依赖关系控制了任务启动流程gulpSequence(clean,scss,html,[js, css, image], cb) })// 通用任务配置//// 定义文件夹的清空任务 gulp.task(clean, function (cb) {del([dist]).then(function () {cb()console.log(清空了dist目录里面里面的东西)}) })// 处理js文件 gulp.task(js, function () {var stream gulp.src(src/js/*.js)// .pipe(concat(all.js)).pipe(gulp.dest(dist/js)).pipe(uglify()).pipe(rename({// dirname: dist/js,basename: all,// prefix: bonjour-,suffix: .min,extname: .js})).pipe(gulp.dest(dist/js))return stream })// 处理css文件 gulp.task(css, function () {var stream gulp.src(src/css/*.css).pipe(autoprefixer({browsers: [last 2 versions],cascade: false}))// .pipe(concatCss(all.css)).pipe(gulp.dest(dist/css)).pipe(cssnano()).pipe(rename({// dirname: dist/css,basename: all,// prefix: bonjour-,suffix: .min,extname: .css})).pipe(gulp.dest(dist/css))return stream })// 处理sass文件 gulp.task(sass, function () {return gulp.src(src/sass/*.scss).pipe(sass().on(error, sass.logError)).pipe(gulp.dest(src/css)); });// 处理html插件 gulp.task(html, function () {var stream gulp.src(src/*.html).pipe(useref()).pipe(minifyHTML()).pipe(gulp.dest(dist))return stream })// 压缩图片插件 gulp.task(image, function () {var stream gulp.src(src/images/*.*).pipe(imagemin()).pipe(gulp.dest(dist/images))return stream })  转载于:https://www.cnblogs.com/luxiaoxiao/p/6428765.html