gulp入门

头像
Allen
    阅读 10 分钟

    安装 Node 和 gulp

    gulp 是基于 node 实现的，那么我们就需要先安装 node。
    npm 是 node 的包管理工具，可以利用它安装 gulp 所需的包。（在安装 node 时已经自动安装了 npm）

    在命令行输入

    npm install -g gulp

    安装gulp（-g 安装全局性的gulp包）

    如果一直没安装成功，请使用 cnpm 安装(npm的国内加速镜像)
    或者请输入sudo npm install -g gulp 使用管理员权限安装。（可能会要求输入密码）
    安装时请注意命令行的提示信息，安装完成后可在命令行输入 gulp -v 以确认安装成功。

    使用 gulp 压缩 JS

    压缩 js 代码可降低 js 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。

    所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。
    找到 js/ 目录下的所有 js 文件，压缩它们，将压缩后的文件存放在 dist/js/ 目录下。

    gulp 的所有配置代码都写在 gulpfile.js 文件。
    gulp 压缩是需要用到的方法

    • gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。
    • gulp.src(path) - 选择文件，传入参数是文件路径。
    • gulp.dest(path) - 输出文件
    • gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列

    一、新建一个 gulpfile.js 文件

    gulp-easy
└── gulpfile.js

    二、在 gulpfile.js 中编写代码

    // 获取 gulp
let gulp = require('gulp')

    require() 是 node （CommonJS）中获取模块的语法。

    在 gulp 中你只需要理解 require() 可以获取模块。

    三、获取 gulp-uglify 组件

    // 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')

    四、创建压缩任务

    // 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
    // 1. 找到文件       2.压缩文件      3.另存压缩后的文件
    gulp.src('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js'))
})//js/*.js表示js文件夹下的所有.js文件，js/**/*.js表示js目录下所有子目录的js文件（任意多层级的处理）

    五、安装 gulp-uglify 模块

    因为我们并没有安装 gulp-uglify 模块到本地，所以找不到此模块。

    使用 npm 安装 gulp-uglify 到本地

    npm install -D gulp-uglify

    安装成功后你会看到如下信息：

    gulp-uglify@1.1.0 node_modules/gulp-uglify
├── deepmerge@0.2.7
├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, object-assign@2.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, chalk@1.0.0, lodash.template@3.3.2, vinyl@0.4.6, multipipe@0.1.2, dateformat@1.0.11)
chapter2 $

    在你的文件夹中会新增一个 node_modules 文件夹，这里面存放着 npm 安装的模块。

    目录结构：

    ├── gulpfile.js
└── node_modules
    └── gulp-uglify

    接着输入 gulp script 执行任务

    gulp script
[13:34:57] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[13:34:57] Starting 'script'...
[13:34:57] Finished 'script' after 6.13 ms

    六、编写 js 文件

    我们发现 gulp 没有进行任何压缩操作。因为没有js这个目录，也没有 js 目录下的 .js 后缀文件。

    创建 a.js 文件，并编写如下内容

    // a.js
function demo (msg) {
    alert('--------\r\n' + msg + '\r\n--------')
}

demo('Hi')

    目录结构：

    ├── gulpfile.js
├──  js
│    └── a.js
└── node_modules
    └── gulp-uglify

    接着在命令行输入 gulp script 执行任务

    gulp 会在命令行当前目录下创建 dist/js/ 文件夹，并创建压缩后的 a.js 文件。

    目录结构：

    ├── gulpfile.js
├──  js
│    └── a.js
├──  dist
│    └── js
│        └── a.js
└── node_modules
    └── gulp-uglify
    function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi");

    七、检测代码修改自动执行任务

    js/a.js一旦有修改 就必须重新在命令行输入 gulp script ，这很麻烦。

    可以使用 gulp.watch(src, fn) 检测指定目录下文件的修改后执行任务。

    在 gulpfile.js 中编写如下代码：

    // 监听文件修改，当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script']);

    但是没有命令可以运行 gulp.watch()，需要将 gulp.watch() 包含在一个任务中。

    // 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', ['script'])
})

    接着在命令行输入 gulp auto，自动监听 js/*.js 文件的修改后压缩js。

    $gulp auto
[21:09:45] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[21:09:45] Starting 'auto'...
[21:09:45] Finished 'auto' after 9.19 ms

    此时修改 js/a.js 中的代码并保存。命令行将会出现提示，表示检测到文件修改并压缩文件。

    [21:11:01] Starting 'script'...
[21:11:01] Finished 'script' after 2.85 ms

    至此，我们完成了 gulp 压缩 js 文件的自动化代码编写。

    注意：使用 gulp.watch 后你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通过 Ctrl + C 停止 gulp。

    Mac 下使用 control + C 停止 gulp

    八、使用 gulp.task('default', fn) 定义默认任务

    增加如下代码

    gulp.task('default', ['script', 'auto']);

    此时你可以在命令行直接输入 gulp +回车，运行 script 和 auto 任务。

    最终代码如下：

    // 获取 gulp
var gulp = require('gulp')

// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
    // 1. 找到文件       2.压缩文件        3.另存压缩后的文件
    gulp.src('js/*.js').pipe(uglify()) .pipe(gulp.dest('dist/js'))
})

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', ['script'])
})


// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])

    九、运行 gulp 查看效果

    在命令行输入 gulp +回车

    你将看到命令行出现如下提示

    gulp
[17:01:19] Using gulpfile ~/Documents/code/gulp-book/demo/gulp-easy/gulpfile.js
[17:01:19] Starting 'script'...
[17:01:19] Finished script' after 6.21 ms
[17:01:19] Starting 'auto'...
[17:01:19] Finished 'auto' after 5.42 ms
[17:01:19] Starting 'default'...
[17:01:19] Finished 'default' after 5.71 μs

    gulp 会创建 dist/js 目录，并创建 a.js 文件，此文件存放压缩后的 js 代码。

    使用 gulp 压缩 CSS

    同压缩js有一定相同的地方

    压缩 css 代码可降低 css 文件大小，提高页面打开速度。
    一、安装 gulp-minify-css 模块

    提示：你需要使用命令行的 cd 切换到对应目录后进行安装操作。

    学习使用命令行

    在命令行输入

    npm install -D gulp-minify-css

    安装成功后你会看到如下信息：(安装时间可能会比较长)

    gulp-minify-css@1.0.0 node_modules/gulp-minify-css
├── object-assign@2.0.0
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── clean-css@3.1.8 (commander@2.6.0, source-map@0.1.43)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
├── vinyl-bufferstream@1.0.1 (bufferstreams@1.0.1)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, multipipe@0.1.2, vinyl@0.4.6, chalk@1.0.0, lodash.template@3.3.2, dateformat@1.0.11)

    二、参照 使用 gulp 压缩 JS 创建 gulpfile.js 文件编写代码

    在对应目录创建 gulpfile.js 文件并写入如下内容：

    // 获取 gulp
var gulp = require('gulp')

// 获取 minify-css 模块（用于压缩 CSS）
var minifyCSS = require('gulp-minify-css')

// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
    // 1. 找到文件
    gulp.src('css/*.css')
    // 2. 压缩文件
        .pipe(minifyCSS())
    // 3. 另存为压缩文件
        .pipe(gulp.dest('dist/css'))
})

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 css 任务
    gulp.watch('css/*.css', ['css'])
});

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务
gulp.task('default', ['css', 'auto'])

    三、运行 gulp 查看效果

    在命令行输入 gulp +回车

    你将看到命令行出现如下提示

    gulp
[17:01:19] Using gulpfile ~/Documents/code/gulp-book/demo/chapter3/gulpfile.js
[17:01:19] Starting 'css'...
[17:01:19] Finished 'css' after 6.21 ms
[17:01:19] Starting 'auto'...
[17:01:19] Finished 'auto' after 5.42 ms
[17:01:19] Starting 'default'...
[17:01:19] Finished 'default' after 5.71 μs

    gulp 会创建 dist/css 目录，并创建 a.css 文件，此文件存放压缩后的 css 代码。

    使用 gulp 压缩图片

    压缩 图片文件可降低文件大小，提高图片加载速度。
    一、安装 gulp-imagemin 模块

    提示：你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作。

    在命令行输入

    npm install -D gulp-imagemin

    安装成功后你会看到如下信息：(安装时间可能会比较长)

    gulp-imagemin@2.2.1 node_modules/gulp-imagemin
├── object-assign@2.0.0
├── pretty-bytes@1.0.3 (get-stdin@4.0.1)
├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, has-ansi@1.0.3, strip-ansi@2.0.1)
├── through2-concurrent@0.3.1 (through2@0.6.3)
├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, vinyl@0.4.6, through2@0.6.3, multipipe@0.1.2, lodash.template@3.3.2, dateformat@1.0.11)
└── imagemin@3.1.0 (get-stdin@3.0.2, optional@0.1.3, vinyl@0.4.6, through2@0.6.3, stream-combiner@0.2.1, concat-stream@1.4.7, meow@2.1.0, vinyl-fs@0.3.13, imagemin-svgo@4.1.2, imagemin-optipng@4.2.0, imagemin-jpegtran@4.1.0, imagemin-pngquant@4.0.0, imagemin-gifsicle@4.1.0)

    二、创建 gulpfile.js 文件编写代码

    在对应目录创建 gulpfile.js 文件并写入如下内容：

    // 获取 gulp
var gulp = require('gulp');

// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')

// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
    // 1. 找到图片
    gulp.src('images/*.*')
    // 2. 压缩图片
        .pipe(imagemin({
            progressive: true
        }))
    // 3. 另存图片
        .pipe(gulp.dest('dist/images'))
});

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 images 任务
    gulp.watch('images/*.*)', ['images'])
});

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task('default', ['images', 'auto'])

    三、在 images/ 目录下存放图片

    在 gulpfile.js 对应目录创建 images 文件夹，并在 images/ 目录下存放图片。

    四、运行 gulp 查看效果

    在命令行输入 gulp +回车

    你将看到命令行出现如下提示

    gulp
[18:10:42] Using gulpfile ~/Documents/code/gulp-book/demo/gulp-easy/gulpfile.js
[18:10:42] Starting 'images'...
[18:10:42] Finished 'images' after 5.72 ms
[18:10:42] Starting 'auto'...
[18:10:42] Finished 'auto' after 6.39 ms
[18:10:42] Starting 'default'...
[18:10:42] Finished 'default' after 5.91 μs
[18:10:42] gulp-imagemin: Minified 3 images (saved 25.83 kB - 5.2%)

    使用 gulp 编译 LESS以及使用 gulp 编译 Sass

    需有在Sass官网下载最新版本Ruby
    然后按照说明安装sass

    //1.删除原gem源
gem sources --remove https://rubygems.org/

//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/

//3.打印是否替换成功
gem sources -l

//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/
//安装sass
gem install -g sass

    Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护。
    安装

    npm install -D gulp-less

    基本用法

    // 获取 gulp
var gulp = require('gulp')
// 获取 gulp-less 模块
var less = require('gulp-less')

// 编译less
// 在命令行输入 gulp less 启动此任务
gulp.task('less', function () {
    // 1. 找到 less 文件
    gulp.src('less/**.less')
    // 2. 编译为css
        .pipe(less())
    // 3. 另存文件
        .pipe(gulp.dest('dist/css'))
});

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 less 任务
    gulp.watch('less/**.less', ['less'])
})

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 less 任务和 auto 任务
gulp.task('default', ['less', 'auto'])

    Sass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发，变得简单和可维护。
    安装

    npm install -D gulp-ruby-sass

    基本用法

    // 获取 gulp
var gulp = require('gulp')
// 获取 gulp-ruby-sass 模块
var sass = require('gulp-ruby-sass')

// 编译sass
// 在命令行输入 gulp sass 启动此任务
gulp.task('sass', function() {
    return sass('sass/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('dist/css'))
});


// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 images 任务
    gulp.watch('sass/**/*.scss', ['sass'])
});

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 sass 任务和 auto 任务
gulp.task('default', ['sass', 'auto'])

    最终常用压缩的集合代码

    // 引入gulp, 实际上是Gulp的一个实例对象
let gulp = require('gulp');
// 是一个压缩js的插件 ，返回的是一个函数
let uglify = require('gulp-uglify');
// 是一个压缩css的插件，返回的是一个函数
let minifyCss = require('gulp-minify-css');
let babel = require('gulp-babel');
// 新建一个名叫script的任务
gulp.task('script', () => {
  //读取js/*.js; 通过管道让uglify()去处理所有的流，通过管道把文件写入到目标文件中
  //**/表示js目录任意多层级目录下的js文件
  gulp.src('js/**/*.js').pipe(babel()).pipe(uglify()).pipe(gulp.dest('dist/js'));
});
// 新建一个名为css的任务
gulp.task('css', () => {
  // 读取css/*.css文件, 通过管道minifycss()去处理，再放入到目标文件
  gulp.src('css/**/*.css').pipe(minifyCss()).pipe(gulp.dest('dist/css'));
})
//新建一个名为auto的任务
gulp.task('auto', function(){
  // 监听js/*.js文件，如果发生变化则执行script
  gulp.watch('js/**/*.js', ['script']);
  gulp.watch('css/**/*.css', ['css']);
});
//新建一个名叫default的任务，执行这些任务之前，先执行script,css,auto任务
gulp.task('default', ['script', 'css', 'auto']);
    node.js
    Allen
    40 声望6 粉丝

    新手上路，擅长急刹

    下一篇 »
    vue組件自学

    引用和评论

    推荐阅读
    头像
    vuex浅入浅出

    Allen阅读 2.5k

    头像
    解决lodash由于依赖错误导致无法启动的问题

    LYX6666赞 3阅读 1k

    头像
    阿里云ECS服务器部署Node.js项目全过程详解

    kovli赞 1阅读 6k

    头像
    SAP Fiori应用的三种部署方式

    注销赞 1阅读 5k

    头像
    JS工程化集锦

    specialCoder赞 2阅读 1.8k

    头像
    Node.js学习备案

    寒青赞 1阅读 1.5k

    头像
    解决nvm install node 出现错误

    吴季分赞 1阅读 870

    0 条评论
    得票最新