点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

[翻译]Gulp.js简介-脚后跟着猫

来源：动视网责编：小采时间：2020-11-27 16:44:23

[翻译]Gulp.js简介-脚后跟着猫

[翻译]Gulp.js简介-脚后跟着猫:我们讨论了很多关于怎么减少页面体积，提高重网站性能的方法。有些是操作是一劳永逸的，如开启服务器的gzip压缩，使用适当的图片格式，或删除一些不必要的字符。但有一些任务是每次工作都必须反复执行的。如新图片或修改后图片的压缩去除调试语句如con

推荐度：

点击下载本文 文档为doc格式

导读[翻译]Gulp.js简介-脚后跟着猫:我们讨论了很多关于怎么减少页面体积，提高重网站性能的方法。有些是操作是一劳永逸的，如开启服务器的gzip压缩，使用适当的图片格式，或删除一些不必要的字符。但有一些任务是每次工作都必须反复执行的。如新图片或修改后图片的压缩去除调试语句如con

理论讲完了，下面动手使用gulp吧。

第1步：安装Node.js

可以到官网下载你电脑系统对应的版本，具体怎么安装自己百度吧。

安装完成后，打开命令行，输入

node -v

如显示你当前安装的node版本。下面同样可以输入

npm -v

查看node.js的包管理器的版本信息。

如果哪个命令失败，检查一下你是不是命令输入错误了。如果没错，那更好，说明你node安装成功了。

第2步：安装gulp

使用npm安装gulp，需要添加-g标识把gulp安装到全局环境，可以在使其在任意项目中使用。

npm install gulp -g

如果使用的是mac或linux，需要在命令前加sudo，切换到管理员权限。

sudo npm install gulp -g

输入下面命令查看一下gulp是否安装成功

gulp -v

第3步：配置项目

举个例子，比如你的项目文件夹为test,首先切换到项目文件夹

cd test

根据不同的系统,window可以用dir,mac/linus用ls查看文件目录

我们的test文件夹，包括下面的子文件夹

src — the location of pre-processed HTML source files and folders:

images — uncompressed images

scripts — multiple pre-processed script files

styles — multiple pre-processed CSS files

build — the location of production files for upload including:

images — compressed images

scripts — a single minified script file

styles — a single minified CSS file

（build文件夹是我们的生成目录，是通过自动化任务生成的）

首先，在项目里安装gulp

npm install gulp --save-dev

这个命令会在test里创建用于存放gulp和它插件的node_modules文件夹

最后，在test文件夹里创建一个空的gulpfile.js配置文件。这里放我们要声明的任务。

第4步：安装第1个gulp插件

gulp不能自己就工作，你必须安装和配置插件来执行特定任务。首先安装jshint,用于检测我们的js源文件的质量。安装命令如下

npm install gulp-jshint --save-dev

打开gulpfile.js文件，添加以下代码

// include gulp
var gulp = require('gulp'); 

// include plug-ins
var jshint = require('gulp-jshint');

// JS hint task
gulp.task('jshint', function() {
 gulp.src('./src/scripts/*.js')
 .pipe(jshint())
 .pipe(jshint.reporter('default'));});

上面代码的意思是。

引用gulp
把gulp-jshint插件对象放到jshint变量中
声明一个新的gulp任务jshint。这个把所有在src/scripts内的js文件输入到jshint对象中，并把发现的错误输出到控制台。

保存gulpfile.js文件，并且在命令行运行任务，如下

gulp jshint

你会在控制台得到以下信息：

[gulp] Using file D:\test\gulpfile.js
[gulp] Working directory changed to D:\test
[gulp] Running 'jshint'...
[gulp] Finished 'jshint' in 8.24 ms
D:\test\src\scripts\lib.js: line 2, col 20, Missing semicolon.

1 error

第5步：添加其它任务

让我们多尝试一些插件。我们将查找src/images文件夹下，新图片或修改图片，把它们压缩并输出到build/images文件夹里。要做到这些，我们需要安装gulp-changed和gulp-imagemin两个插件。

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

接下来在gulpfile.js文件中引用它们。

var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

并且添加一个新gulp任务，用于执行插件

// minify new images
gulp.task('imagemin', function() {
 var imgSrc = './src/images/**/*',
 imgDst = './build/images';

 gulp.src(imgSrc)
 .pipe(changed(imgDst))
 .pipe(imagemin())
 .pipe(gulp.dest(imgDst));});

保存gulpfile.js，然后在命令行运行下面的命令

gulp imagemin

图片会被压缩并保存到生成目录对应的文件夹中，并且在控制台会得到下面的信息

[gulp] Using file D:\test\gulpfile.js
[gulp] Working directory changed to D:\test
[gulp] Running 'imagemin'...
[gulp] Finished 'imagemin' in 5.71 ms
[gulp] gulp-imagemin: ? battery.png (saved 2.7 kB)
[gulp] gulp-imagemin: ? app.png (saved 3.2 kB)
[gulp] gulp-imagemin: ? tick.png (saved 2.8 kB)

相同的方法，我们可以添加gulp-minify-html插件，用于压缩所有src下的html文件

npm install gulp-minify-html --save-dev

修改gulpfile.js文件，添加新任务htmlpage

// include plug-ins
var minifyHTML = require('gulp-minify-html');

// minify new or changed HTML pages
gulp.task('htmlpage', function() {
 var htmlSrc = './src/*.html',
 htmlDst = './build';

 gulp.src(htmlSrc)
 .pipe(changed(htmlDst))
 .pipe(minifyHTML())
 .pipe(gulp.dest(htmlDst));});

保存gulpfile.js，然后测试一下html的压缩

gulp htmlpage

很简单吧？下面来使用一下js相关的插件，对源文件进行合并，压缩，去除调试代码的插件。

还是先安装

npm install gulp-concat --save-dev 
npm install gulp-strip-debug --save-dev 
npm install gulp-uglify --save-dev

在gulpfile.js添加一个新任务scripts

// include plug-ins
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
 gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
 .pipe(concat('script.js'))
 .pipe(stripDebug())
 .pipe(uglify())
 .pipe(gulp.dest('./build/scripts/'));});

这个例字中，我们使用一个数组给gulp.src方法传值。这样可以让js按照给定的顺序进行合并和压缩，可以解决一些依赖的问题。和上面一样，保存，然后运行任务

gulp scripts

最后让我们来处理一下css文件，使用添加浏览器前缀插件，压缩插件。

安装

npm install gulp-autoprefixer --save-dev 
npm install gulp-minify-css --save-dev

更新gulpfile.js文件

// include plug-ins
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');

// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
 gulp.src(['./src/styles/*.css'])
 .pipe(concat('styles.css'))
 .pipe(autoprefix('last 2 versions'))
 .pipe(minifyCSS())
 .pipe(gulp.dest('./build/styles/'));});

最后运行

gulp styles

给autoprefixer插件，传入以字符串或数组形式的浏览器支持配置，这里我们希望支持所有最新两个版本的浏览器。它会把每个属性按照caniuse.com里的数据进行对照，需要添加前缀则添加。可以避免每次去手工查询并添加对应前缀。

在这些例子中我们只是演示了几个有用的插件，你也可以自己到npmjs.org里去查找你需要的。其它一些有用的插件有：

gulp-sass 一个node版本的css预处理器

gulp-clean 可以用来移除没用的文件或文件夹

gulp-file-include 用对应的文件替换对应的@@inclue('filename')

gulp-size 日志文件和项目文件的大小

第6步：自动化任务

到现在为止，我们都是一次运行一个任务，gulp允许我们在一个任务中执行所有它依赖的子任务。下面在gulpfile.js中创建一个default任务

// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {});

然后在命令行运行下面命令

gulp

所有任务都是按照顺序执行。

但这样还是太麻烦了，每次都要执行。gulp可以使用watch方法来监听你的文件夹，如果有变化，会执行一个任务来完成。下面我们修改一下default任务，使其可以监听html,css,js,image文件的变化。

// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {
 // watch for HTML changes
 gulp.watch('./src/*.html', function() {
 gulp.run('htmlpage');
 });

 // watch for JS changes
 gulp.watch('./src/scripts/*.js', function() {
 gulp.run('jshint', 'scripts');
 });

 // watch for CSS changes
 gulp.watch('./src/styles/*.css', function() {
 gulp.run('styles');
 });});

现在我们再运行