搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 观奇笔记 > gulp打包工具指南

gulp打包工具指南

观奇笔记 2018-03-01




 这是我接触到的第一个打包工具,现在和大家分享一下。




       我写这篇博客的目的只是为了帮助那些还不会gulp的人能够完整的使用gulp这个工具来协助你完成web开发!


        我希望这篇博客可以帮助你,那样我才会快乐!

 


 1

1

        

1.gulp简介。

gulp是一款自动化构建工具,由外国人开发,可以增强你的工作流程!

2.gulp作用。

  • 易于使用

通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。

  • 构建快速

利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

  • 插件高质

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

  • 易于学习

通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。



2

        

1.gulp安装。

在安装之前,你需要新建一个文件夹,但是名字不能为gulp。

首先,你需要运行以下命令:

$ npm init

这是让npm初始化一下,一路按回车。

这时,你的根目录下就有了package.json这样一个配置文件!

然后,你在安装一下gulp:

$ npm install gulp --save-dev

这条命令是让gulp保存在根目录下,并且作为扩展工具。

最后,你查看一下gulp的版本号,如果出来,就说明成功了:


123
$ glup -v[20:11:34] CLI version 3.9.1[20:11:34] Local version 3.9.1


至此,便成功的安装好了,你现在激动不?好戏还在后面!

2.gulp案例。

接下来,就由我给大家做一个案例,如何使用gulp这款工具。

首先,我们在根目录下新建一个文件夹,比如src,在它下面又有img,css,js,index.html;

然后,开始下载必备的gulp包,这里有:

1234567891011"browser-sync": "^2.18.13","gulp": "^3.9.1","gulp-autoprefixer": "^4.0.0","gulp-concat": "^2.6.1","gulp-concat-css": "^2.3.0","gulp-csscomb": "^3.0.8","gulp-htmlmin": "^3.0.0","gulp-imagemin": "^3.3.0","gulp-less": "^3.3.2","gulp-uglifycss": "^1.0.8","gulp-uglyfly": "^1.4.2"

运行此条命令可以下载以上这些包:

$ npm install <你要下载的包名> --save-dev

下载完以后,你需要到配置文件package.json中查看也没有添加到devDependencies中,如果有,就说明成功了!

接着需用建立一个名为gulpfile.js的文件,然后输入以下命令:



//这些主要是引刚才下载的包var gulp = require('gulp');var less = require('gulp-less');var uglifycss = require('gulp-uglifycss');var autoprefixer = require('gulp-autoprefixer');var csscomb = require('gulp-csscomb');var concat = require('gulp-concat');var uglyfly = require('gulp-uglyfly');var img = require('gulp-imagemin');var htmlmin = require('gulp-htmlmin');var browserSync = require('browser-sync').create();//接下来就是建立任务://这个任务是把less编译成cssgulp.task('style',function(){	gulp.src(['src/css/*.less','!src/css/_*.less'])    //入口文件  *在css下面以.less所有文件编译	.pipe(less())	.pipe(autoprefixer({	browsers: ['Android 2.3',	'Android >= 4',	'Chrome >= 20',	'Firefox >= 24', // Firefox 24 is the latest ESR 	'Explorer >= 8',	'iOS >= 6',	'Opera >= 12',	'Safari >= 6'],	cascade: false}))	.pipe(csscomb())	.pipe(uglifycss())				      //less编译	.pipe(gulp.dest('dest/css'))  //出口文件});//这个任务是把所有的js文件合并成一个名为main.js的文件gulp.task('script',function(){	gulp.src('src/js/*.js')	.pipe(concat('main.js'))	.pipe(uglyfly())	.pipe(gulp.dest('dest/js'))});//这个任务是把图片复制,压缩gulp.task('img',function(){	gulp.src('src/img/*.*')	.pipe(img())	.pipe(gulp.dest('dest/img'))});//这个任务是把所有的html文件压缩gulp.task('htmlmin',function(){	gulp.src('src/*.html')	.pipe(htmlmin({	  	collapseWhitespace: true,	  	removeComments: true	}))	.pipe(gulp.dest('dest'))});//这个任务就是游览器热更新var reload = browserSync.reload;gulp.task('server',function(){	browserSync.init({		server: {			baseDir: "dest"		}	});	gulp.watch('src/*.html',['htmlmin']).on("change",reload);	gulp.watch('src/js/*.js',['script']).on("change",reload);	gulp.watch('src/css/*.less',['style']).on("change",reload);	gulp.watch('src/img/*.*',['img']).on("change",reload);})


最后大功告成!

3

        

总结。

gulp作为一款工具目前非常流行,希望大家多用它。此片博文还有许多不足之处,希望大家批评指正。


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《gulp打包工具指南》的版权归原作者「观奇笔记」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注观奇笔记微信公众号

观奇笔记微信公众号:guanqinote

观奇笔记

手机扫描上方二维码即可关注观奇笔记微信公众号

观奇笔记最新文章

精品公众号随机推荐