gulp打包工具指南

Posted 2021-04-08 观奇笔记

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

       我写这篇博客的目的只是为了帮助那些还不会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作为一款工具目前非常流行,希望大家多用它。此片博文还有许多不足之处,希望大家批评指正。