gulp
相较于webpack
更好学一点,而且由于其轻量化和异步等特点更适合我这种菜鸡入门,所以先学gulp
再看webpack
叭~
咋整 首先我们需要的是建立一个.js
文件。名字你随便取,但是里边的内容还是有规定的。大致分为三部分
1 2 3 4 5 6 7 8 9 var gulp = require ('gulp' );gulp.task("任务名" , function ( ) { }) gulp.task("default" , ["任务名1" , "任务名2" , ....])
之后控制台输入gulp
,回车就会自动执行gulp.task
中的任务咯
相关插件
gulp-concat
:合并文件(js/css)
gulp-uglify
:压缩 js 文件
gulp-rename
:文件重命名
gulp-less
:编译 less
gulp-clean-css
:压缩 css
gulp-livereload
:实时自动编译刷新
重要 API
gulp.src(filePath/pathArr)
指向指定路径的所有文件,返回文件流对象
用于读取文件
gulp.dest(dirPath/pathArr)
gulp.task(name, [deps], fn)
gulp.watch()
合并压缩js 一般来讲 js 是构建是大家伙儿用得比较多的。所以我们先从这里入手
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var gulp = require ("gulp" );var concat = require ("gulp-concat" );var uglify = require ("gulp-uglify" );var rename = require ("gulp-rename" );var less = require ("gulp-less" );var cleanCss = require ("gulp-clean-css" );var htmlMin = require ("gulp-htmlmin" );gulp.task("js" , function ( ) { return gulp.src("src/js/**/*.js" ) .pipe(concat("build.js" )) .pipe(gulp.dest("dist/js/" )) .pipe(uglify()) .pipe(rename({ suffix : ".min" })) .pipe(gulp.dest("dist/js/" )) })
fine,我们先大致讲解一下。
gulp.task
显然是注册一个压缩js
的任务。第一个参数为被压缩文件的类型,其后则是我们的构建函数。
其中我们注意到这句的写法:return gulp.src("src/js/**/*js")
那两个*
的意思是进行一个深度遍历。将 js 文件下的所有.js
文件全部读取。若去掉则代表浅度遍历。
而我们中间进行的那一步gulp.dest("dist/js/")
没有意义,只是想告诉大家伙儿我们什么时候输出都可以。
值得注意的一点,若我们在代码中定义的变量未使用则在打包完成后的 .min.js
文件中不予显示。甚至变量定义都被裁掉了。这也进一步的减少了占用空间。
随后我们在控制台输入gulp + 任务名
,在本例中也就是gulp js
,即可完成压缩
合并压缩CSS 转化less 很多 boy 喜欢使用这些预编译插件,让我们可以更好的看清逻辑。所以我们先对.less
文件进行转换,使其变为.css
。在此之前当然少不了引包了。因为懒我上边一次性引好了。
1 2 3 4 5 6 7 8 var gulp = require ("gulp" );var less = require ("gulp-less" );gulp.task("less" , function ( ) { return gulp.src("src/less/**/*.less" ) .pipe(less()) .pipe(gulp.dest("dist/css/" )) })
随后我们在控制台输入gulp + 任务名
,在本例中也就是gulp less
,即可完成编译
这里注意我的操作。最后将文件输出到了dist
目录下的css
文件夹中,以方便我们今后对.css
文件进行编译
合并&压缩css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var gulp = require ("gulp" );var concat = require ("gulp-concat" );var uglify = require ("gulp-uglify" );var rename = require ("gulp-rename" );var less = require ("gulp-less" );var cleanCss = require ("gulp-clean-css" );var htmlMin = require ("gulp-htmlmin" );gulp.task("css" , function ( ) { return gulp.src("src/css/**/*.css" ) .pipe(concat("build.css" )) .pipe(uglify()) .pipe(rename({ suffix : ".min" })) .pipe(cleanCss({ compatibility : "ie8" })) .pipe(gulp.dest("dist/css/" )) })
控制台输入gulp css
, css 文件就完成压缩和合并啦
OK 我们大功告成。这样就会把 CSS 文件全部压缩为一个build.min.css
啦
真的大功告成了? 诸位兄弟有没有注意到我们的.less
文件是依赖于.css
文件的 ?而且gulp
最大的优势还是异步编译 !咱这得有个先后顺序呀!所以我们进行 css 编译的时候需要加一个参数:一个Array
!
1 2 3 gulp.task("css" , ["less" ], function ( ) { .... })
里边的["less"]
是我们的依赖项。在完成.less
文件编译之前是不会进行.css
文件的编译的。这就完美的解决了我们的异步执行时任务之间的依赖问题 。触类旁通,其他的也一样哈。
构建HTML 这玩意儿可不叫压缩了,HTML 代码好像没法怎么压缩,也只能删删行与行之间的空格维持一下生活的样子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var gulp = require ("gulp" );var concat = require ("gulp-concat" );var uglify = require ("gulp-uglify" );var rename = require ("gulp-rename" );var less = require (大专栏 gulp初体验 ing">"gulp-less" );var cleanCss = require ("gulp-clean-css" );var htmlMin = require ("gulp-htmlmin" );var htmlMin = require ("gulp-htmlmin" );gulp.task("html" , function ( ) { return gulp.src("index.html" ) .pipe(htmlMin({ collapseWhitespace : true })) .pipe(gulp.dest("dist/" )) }) gulp.task("default" , ["js" , "less" , "css" , "html" ])
控制台输入gulp html
, html 文件就完成压缩和合并啦
大致就是这亚子,html 这里好像真的没什么可说的。唯一要注意的一点就是注意路径 !咱们打包之后的相对路径一定要和打包之前的相对路径一样,否则你会发现你的 css 和 js 文件都离你而去,剩一个光秃秃的 html,特别尴尬。
半自动项目构建 咱们有的时候非得动一下某个参数,然后老规矩,编译,完了再重新刷新一下网页才能看到效果。gulp
是有这样半自动化的构建工具的:npm install gulp-livereload --save-dev
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 var livereload = require ("gulp-livereload" );gulp.task("html" , function ( ) { .... .pipe(livereload()) }); gulp.task("less" , function ( ) { .... .pipe(livereload()) }); gulp.task("css" , function ( ) { .... .pipe(livereload()) }); gulp.task("js" , function ( ) { .... .pipe(livereload()) }); gulp.task("watch" , ["default" ], function ( ) { livereload.listen(); gulp.watch("src/js/*.js" , ["js" ]); gulp.watch(["src/css/*.css" , "src/less/*.less" ], ["css" ]); }) gulp.task("default" , ["js" , "less" , "css" , "html" ])
随后执行gulp watch
。你就理解为热部署好啦~。如此你更改某项依赖文件则可以实时的反映在你的页面之中。
全自动? 刚才那个我觉着挺屌了但只能算是半自动。那怎么算是全自动?咱们用 vue 写项目的时候大多数好兄弟用的都是vue-cli
叭。有没有注意到我们更该.vue
文件之后他随后就会实时的更新到页面上,这个过程都不需要我们刷新页面!
咱们所说的全自动也可以完成!
插件下载npm install gulp-connect --save-dev
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 var connect = require ("gulp-connect" );gulp.task("html" , function ( ) { .... .pipe(livereload()) .pipe(connect.reload()) }); gulp.task("less" , function ( ) { .... .pipe(livereload()) .pipe(connect.reload()) }); gulp.task("css" , function ( ) { .... .pipe(livereload()) .pipe(connect.reload()) }); gulp.task("js" , function ( ) { .... .pipe(livereload()) .pipe(connect.reload()) }); gulp.task("server" , ["default" ], function ( ) { connect.server({ root: "dist/" , livereload: true , port: 8080 }); gulp.watch("src/js/*.js" , ["js" ]); gulp.watch(["src/css/*.css" , "src/less/*.less" ], ["css" ]); })
gulp-connect
插件内部有一个微型服务器,用于读取当前配置文件的所有配置,并将你所需要加载的依赖、执行的任务以及全部的源文件。并将其全部读取到其微型服务器中,传入一个地址他会帮你默认在此地址中打开。
如此,我们只需要在控制台运行命令gulp server
即可完成部署
还有插件? 咱们完成之后让他可以自动打开网页。有点类似于venus
平台。
加载完成后自动打开指定的链接:npm install open --save-dev
1 2 3 4 5 var open = require ("open" )open("http://localhost:8080" )
gulp-load-plugins 这玩意儿能干嘛?
不能 它是用来提前帮你打包基于gulp
的所有插件 。
1 2 3 4 5 6 7 8 var gulp = require ("gulp" );var $ = require ("gulp-load-plugins" );
不过咱哥几个需要注意的一点是,我们在此基础上不能换数据!他会自动把中间的”-“连字符命名法转换成驼峰命名法。所以起名的时候慎重点看清楚咯。
gulp初体验
原文:https://www.cnblogs.com/lijianming180/p/12375838.html