|
阅读：7497回复：0
Gulp插件使用经验总结
正好前一阵没事去看了下nodejs相关的一些东西，了解了下模块加载、包管理相关的东西，正好也看到别人提到了gulp这个东西，看了下配置，觉得比grunt容易很多，很容易上手。
Gulp官网 Gulp插件 于是边学边用，经过几周的上手，终于配置了一套适合自己的工具。当然，这之前也从对gulp的一知半解到后来可以根据自己需求修改、编写插件，也遇到了不少的坑，所以今天就是来分享这些填坑经验的。 gulp-2x 1. 了解node中文件路径配置 gulp内建的.src .dest .watch等方法，传入的文件路径的解析是通过glob这个模块处理的，所以可以先去了解下这个路径字串格式的配置方法，这样子对自由组织选取文件操作很有帮助。 例如想要通过文件名排除某些文件的时候，就可以这样： 1. gulp.src('css/**/!(_)*'); //排除以_开头的文件 node-glob 2. .watch方法路径不要用 './xx' 用 './xx' 开头作为当前路径开始，会导致无法监测到新增文件，所以直接省略掉 './' 即可。'./images/*' === 'images/*' 3. .watch使用change事件来同步删除情况 网上看到的很多教程只有文件改变或者新增来自动处理这部分文件，但是删除了源文件，输出文件夹里的对应文件却没有相应的自动删除。其实可以通过change事件来检测删除情况。 var watcher = gulp.watch('js/**/*.js', ['uglify','reload']); watcher.on('change', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); }); event.type==deleted 时就可以对应处理删除情况，这里不再赘述删除文件的处理。 4. 使用gulp-changed来过滤变动的文件 var gulp = require('gulp'); var changed = require('gulp-changed'); var ngmin = require('gulp-ngmin'); // just as an example var SRC = 'src/*.js'; var DEST = 'dist'; gulp.task('default', function () { return gulp.src(SRC) .pipe(changed(DEST)) // ngmin will only get the files that // changed since the last time it was run .pipe(ngmin()) .pipe(gulp.dest(DEST)); }); changed的参数中输出文件夹这一参数不能省，而且不能和源文件夹相同。gulp-watch 也可以实现类似效果，而且不需要指定输出文件夹，但是首次使用文件变动它无法正确处理到。 gulp-changed 5. 使用gulp-plumber来捕获处理任务中的错误 在gulp的管道流任务处理中，如果某个环节出了错，会导致整个任务中断，包括watch任务，这很麻烦。所以gulp-plumber来了。 var plumber = require('gulp-plumber'); var less= require('gulp-less'); gulp.src('./src/*.ext') .pipe(plumber()) .pipe(less()) .pipe(gulp.dest('./dist')); gulp-plumber 6. 多个合并文件任务的处理方法 简单的项目中可能只需要合并处理一个js、css文件，但是复杂项目中需要合并处理的文件可能不止一个。css好说，好多合并插件都可以处理 @import ，而js该怎么处理呢？ 一种办法是写死任务，有几个合并需求就在gulpfile.js里配置几个任务。我讨厌这种方法。 另一种就是我在用的方法， 将js合并的配置写到package.json里，比如我放到 minjs 这个字段下，我的gulpfule.js中关于js合并部分的代码如下： var minijs=require("./package.json").minijs; var concat=require("gulp-concat"); Object.keys(minijs).forEach(function(name){//合并压缩package.json里指定的文件 gulp.task(name+'js', function() { return gulp.src(minijs[name]) .pipe(concat(name+'.js')) .pipe(gulp.dest('dist/js')); }); }); 原文：http://m.blog.csdn.net/article/details?id=50606149 |
|
|
公众号
