首页 > 代码库 > glup学习
glup学习
建立:在项目根目录新建一个js文件并命名为gulpfile.js;
方法:gulp只有五个方法:
- task:用来定义任务
- 当定义一个简单的任务时,需要传入任务名字和执行函数两个属性。
- 一个任务有时也可以是一系列任务。假设要定义一个任务build来执行css、js、imgs这三个任务可以通过指定一个任务数组而不是函数来完成。
gulp.task(‘build‘, [‘css‘, ‘js‘, ‘imgs‘]);
- 这些任务不是同时进行的,所以你不能认为在js任务开始的时候css任务已经结束了,也可能还没有结束。为了确保一个任务在另一个任务执行前已经结束,可以将函数和任务数组结合起来指定其依赖关系。
gulp.task(‘css‘, [‘greet‘], function () { // Deal with CSS here});
- run
- watch:监听文件,它接受一个glob或者glob数组(和gulp.src()一样)以及一个任务数组来执行回调。
- build任务可以将模板转换成html格式,然后定义一个watch任务来监听模板文件的变化,
gulp.task(‘watch‘, function () { gulp.watch(‘templates/*.tmpl.html‘, [‘build‘]);});
也可以给watch函数一个回调函数
gulp.watch(‘templates/*.tmpl.html‘, function (event) { console.log(‘Event type: ‘ + event.type); // added, changed, or deleted console.log(‘Event path: ‘ + event.path); // The path of the modified file});
在返回的watcher中添加监听事件:
var watcher = gulp.watch(‘templates/*.tmpl.html‘, [‘build‘]);watcher.on(‘change‘, function (event) { console.log(‘Event type: ‘ + event.type); // added, changed, or deleted console.log(‘Event path: ‘ + event.path); // The path of the modified file});
- end 在watcher结束时触发(这意味着,在文件改变的时候,任务或者回调不会执行)
- error 在出现error时触发
- ready 在文件被找到并正被监听时触发
- nomatch 在glob没有匹配到任何文件时触发
- 在返回的watcher中使用函数:
- watcher.end() 停止watcher(以便停止执行后面的任务或者回调函数)
- watcher.files() 返回watcher监听的文件列表
- watcher.add(glob) 将与指定glob相匹配的文件添加到watcher(也接受可选的回调当第二个参数)
- watcher.remove(filepath) 从watcher中移除个别文件
- build任务可以将模板转换成html格式,然后定义一个watch任务来监听模板文件的变化,
- src:gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组,然后返回一个可以传递给插件的数据流。例子:
- js/app.js 精确匹配文件
js/*.js 仅匹配js目录下的所有后缀为.js的文件
- js/**/*.js 匹配js目录及其子目录下所有后缀为.js的文件
- !js/app.js 从匹配结果中排除js/app.js,这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
- *.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件
- dest ://在stream中对应输出流
基本代码:
- 引入组件 //下载: npm install gulp-jshint --save-dev
var gulp = require(‘gulp‘); var jshint = require(‘gulp-jshint‘);var sass = require(‘gulp-sass‘);var concat = require(‘gulp-concat‘);var uglify = require(‘gulp-uglify‘);var rename = require(‘gulp-rename‘);
常用组件:
gulp-ruby-sass : 支持sass
gulp-minify-css : 压缩css
gulp-jshint : 检查js
gulp-uglify : 压缩js
gulp-concat : 合并文件
gulp-rename : 重命名文件
gulp-htmlmin : 压缩html
gulp-clean : 清空文件夹 Lint任务: //Link任务会检查js/目录下得js文件有没有报错或警告。
gulp.task(‘lint‘, function() { gulp.src(‘./js/*.js‘) .pipe(jshint()) .pipe(jshint.reporter(‘default‘));});
- 编译,以Sass为例 ://Sass任务会编译scss/目录下的scss文件,并把编译完成的css文件保存到/css目录中。
gulp.task(‘sass‘, function() { gulp.src(‘./scss/*.scss‘) .pipe(sass()) .pipe(gulp.dest(‘./css‘)); //})
- 合并,以js为例;//scripts任务会合并js/目录下得所有得js文件并输出到dist/目录,然后gulp会重命名、压缩合并的文件,也输出到dist/目录。
gulp.task(‘scripts‘, function() { gulp.src(‘./js/*.js‘) .pipe(concat(‘all.js‘)) .pipe(gulp.dest(‘./dist‘)) .pipe(rename(‘all.min.js‘)) .pipe(uglify()) .pipe(gulp.dest(‘./dist‘));});
- 基于其他任务:创建了一个基于其他任务的default任务。使用.run()方法关联和运行我们上面定义的任务,使用.watch()方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义的其他任务。
gulp.task(‘default‘, function(){ gulp.run(‘lint‘, ‘sass‘, ‘scripts‘); gulp.watch(‘./js/*.js‘, function(){ gulp.run(‘lint‘, ‘sass‘, ‘scripts‘); });});
glup学习
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。