gulp入门之路

来源：互联网发布：ubuntu win7引导修复编辑：程序博客网时间：2024/05/29 09:29

首先需要看一看开发文档点击打开链接

了解简单的gulp原理

Gulp 方法

Gulp有5个基本方法：src、dest、task、run、watch

gulp模块的src方法，用于产生数据流。它的参数表示需要处理的文件，一般有以下几种形式：

src('./dist/*.html')在dist
下的所有html文件，

src('./dist/**/*.html')dist文件目录下某个目录及其所有子目录中的所有后缀为html的文件，

src('!dist/app.html')除了dist/app.html以后的所有文件

src('*.+(html|css)：匹配项目更目录下，所有后缀为js/css的文件'

src方法的参数还可以是一个数组，用来指定多个成员：

gulp.src(['dist/**/*.html','!dist/**/*.min.html']);

Gulp.dest()

gulp模块的dest方法，可以用来传递文件，同时写入文件到指定目录。可以重复的发送传递给它的数据，因此可以讲文件传送到多个目录中：

gulp.src('dist/templates/*.jade')       .pipe(jade())       .pipe(gulp.dest('/dist/templates'))       .pipe(minify())       .pipe(gulp.dest('/dist/minified_templates'));

Gulp.task()

gulp模块的task方法，用于定义具体的任务。它的第一个参数是，第二个参数是任务函数。

for example:(该方法是用于压缩html代码，并输出在dist文件目录下)

在命令行模式中使用下列命令继续执行：gulp minify命令即可执行该方法。

var gulp = require('gulp');var htmlmin = require('gulp-htmlmin'); gulp.task('minify',function(){      gulp.src('dist/*.html')          .pipe(htmlmin({collapseWhitespace:true}))          .pipe(gulp.dest('dist'))});

task方法还可以指定按顺序运行的一组任务：

gulp.task('build',['css','js','imgs']);

Gulp.run()

gulp模块的run方法，表示要执行的任务。可能会使用单个参数的形式传递多个任务。

注意:任务是尽可能多的并行执行，并且可能不会按照指定的顺序执行。

gulp.run('minify','copyfiles','builddocs'); gulp.run('scripts','copyfiles','builddocs',function(err){     //所有任务完成，或者出发错误而终止});

Gulp.watch()

gulp模块的watch方法，用于指定需要监视的文件。一旦这些文件发生变动，就运行指定（当前为：gulp）任务：

gulp.task('watch',function(){     gulp.watch('dist/tamplates/*.jade',['gulp']);})

阅读全文

0 0