"dependencies": {
"del": "^1.1.1",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.1.0",
"gulp-cache": "^0.2.8",
"gulp-clean": "^0.3.1",
"gulp-concat": "^2.5.2",
"gulp-imagemin": "^2.2.1",
...
}
2.安基胡誉装所需的gulp插件
$ npm install
3.gulpfile.js
'use strict'
var gulp = require('gulp')
/*global -$ 加载需使用的gulp插件*/
var $ = require('gulp-load-plugins')()
配置选项(也可以直接在任务中写相对路径)
/*
*管理资源文件路径集合
*config.static下
*css scripts images 替换为自己的路径(可按照此配置管理)
*/
var config = {}
// 源资源文件路径
config['static'做蠢] = {
styles: 'static/styles/*.*',
scripts: 'static/scripts/*.*',
images: 'static/images/*.*',
html:'static/*.html'
}
...
图片任务流处理方法
/*
*images 任务流
*/
gulp.task('images', function () {
return gulp.src(config['static'].images)
.on('error', function (err) {
console.error('Error!', err.message)
})
.pipe($.imagemin({
distgressive: true,
progressive: true,
interlaced: true,
svgoPlugins: [{removeViewBox: false}],
use: [require('imagemin-pngquant')()]
}))
.pipe(gulp.dest(config['rev'].images))
.pipe($.notify({ message: 'images task complete' }))
})
/*
*img 添加版本任务流
*use gulp-rev to version the rev files and generate the 'rev-manifest.json' file
*/
gulp.task('img', ['images'], function(){
return gulp.src(config['rev'].images_file)
.pipe($.rev())
.pipe(gulp.dest(config['dist'].images))
.pipe($.rev.manifest({
base: 'dist',
merge: true //如果存在 rev-manifest.json文件搏段则合并
}))
.pipe(gulp.dest('dist'))
})
本节我们开始学习如何创建 Gulp 任务。每一个 Gulp 任务都是一个异步的 JavaScript 函数,这个函数是一个可以接收回调函数 callback 作为参数的函数,或者是一个返回 stream 、 promise 、 event emitter 、 child process 或 observable 类型值的函数。
gulp.task() 用于创建一个 gulp 任务,语法如下所示:
给任务起一个唯一的名称后,我们可以通过这个名称来执行任务,例如:
在执行任务时,如果我们不加任务名进行执行,也就是只输入 gulp 命令时 ,会执行名为 default 的默认任务,如果没凳枝有定义这个任务,将什么也不做。
首先我们需要在项目根目录下创建一个 gulpfile.js 文件。并在文件中引入 gulp :
用于告诉 Node 去 node_modules 中查找 gulp 包,先在局部进行查找,找不到则去全局环境中查找。找到之后就会赋值给 gulp 变量,然后我们就可以使用它了。
例如创建一个名为 xkd 的任务:
执行 gulp xkd 命让粗悉令,下图为运行结果:
gulp.task() 方坦乎法中的第二个参数为一个数组,数组中的值是任务名的集合,当执行此任务时,会先执行数组中的任务。我们来看一下例子。
下面我们定义三个任务:
然后将任务 one 、 two 添加到任务 test 中,此时如果我们输入 gulp test 命令,会先执行数组中的任务,我们来看一下任务的执行顺序:
链接: https://www.9xkd.com/
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)