欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

[翻译]Gulp.js简介_html/css_WEB-ITnose

程序员文章站 2022-06-02 09:49:43
...
我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法。有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符。但有一些任务是每次工作都必须反复执行的。如
  • 新图片或修改后图片的压缩
  • 去除调试语句如console,debugger
  • 合并和压缩css和js
  • 把更新的文件部署到服务器
  • 你可能设想大家都会记住所有的这些操作,但总会有人忘记一两条。随着项目越来越大,上面的工作越来越浪费时间。只好设专人来完成这些枯燥的工作。

    能不能让这些工作不用占用人手呢?

    你需要一个自动化的运行程序或构建过程,这听起来很复杂

    虽然在搭建这个构建过程比单独执行每个小任务要复杂得多,但随着应用越广,你可以节省大量的时间和人力,而且也可以避免错误。

    采取注重实效的解决方案

  • 把最耗时的任务自动化
  • 不要过度设计,初始安装设置尽量短和简单
  • 使用一个任务管理工具一段时间,不要一时兴起随便切换到另外一个
  • 我们将讨论一些新的工具和概念。

    1. Node.js-我们将使用node.js,但不用对它了解太深,只要知道一些javascript知识,并会用搜索引擎就好了。
    2. 命令行-你得会输入命令,虽然没有图形界面,但一些命令都很简单。

    grunt vs gulp

    你可能听过grunt,grunt是基于node.js的构建工具

    gulp是一个新的基于node.js的构建工具

    grunt和gulp做同样的事。grunt出来更早,发展得也不错,可以找到很多的插件和资源,而且可以找到很多教程。这是一个很牛的工具,如果你已经很熟悉这个工具了,有哪些问题会让你替换掉它呢?

    没有完美的工具,gulp.js被开发出来解决一些grunt无法解决的问题:

  • grunt插件经常执行多个任务,gulp插件只做一件事
  • grunt需要插件完成一些基本功能,如文件监听,gulp内置了基础功能
  • grunt使用JSON格式的配置文件,gulp采用更精简,更简单的js代码来配置
  • 不是每个人都觉得最后一条,gulp比grunt好,但建议查看一下gulp的演示幻灯片然后自己判断。

    最重要的是gulp是基于流的概念。想想一下,你的文件通过一个管道,在沿着该管道的一个或多个点上一些操作被执行。(很像流水线)

    例如我们可以把我们所有的js文件放到一个script管道,其中

    1. 合并为一个文件
    2. 删除调试代码
    3. 压缩代码
    4. 把生成的文件放到指定目录

    数据输入到一个方法。该方法输出的新数据被下一个方法使用。这让人感觉很像jQuery的链式调用,例如

    $("#element").text("hello world!").addClass("myclass").fadeIn();

    理论讲完了,下面动手使用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 gulpvar gulp = require('gulp'); // include plug-insvar jshint = require('gulp-jshint');// JS hint taskgulp.task('jshint', function() {  gulp.src('./src/scripts/*.js')    .pipe(jshint())    .pipe(jshint.reporter('default'));});

    上面代码的意思是。

    1. 引用gulp
    2. 把gulp-jshint插件对象放到jshint变量中
    3. 声明一个新的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 msD:\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-devnpm install gulp-imagemin --save-dev

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

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

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

    // minify new imagesgulp.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-insvar minifyHTML = require('gulp-minify-html');// minify new or changed HTML pagesgulp.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-insvar concat = require('gulp-concat');var stripDebug = require('gulp-strip-debug');var uglify = require('gulp-uglify');// JS concat, strip debugging and minifygulp.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-insvar autoprefix = require('gulp-autoprefixer');var minifyCSS = require('gulp-minify-css');// CSS concat, auto-prefix and minifygulp.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 taskgulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {});

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

    gulp

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

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

    // default gulp taskgulp.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');  });});

    现在我们再运行

    gulp

    程序会一直保持激活状态并在你改变文件时运行。你不再需要每次都运行任务了。

    第7步:效果

    使用上面的方法对项目进行处理,可以减少50%的页面体积。当你花上几个小时学习一下gulp,它比grunt学习起来容易。希望这个教程对你有用,并且可以让你动手去搭建一个自己的gulp构建工具。

    相关链接:

  • Gulp home page
  • Gulp plug-ins
  • Node.js home page
  • 相关标签: [翻译]Gulp.js简介