gulp的基础语法

参考： 1. gulp的api 2. gulp的常用插件 3. gulp的知识汇总

基础用法

如何使用？

加入gulp的依赖创建gulpfile.js配置文件,默认路径在当前项目根目录下。编写任务,gulp.task(...); gulp.src（）：查找对应规则的文件作为入参,返回读取到的文件流pip(fn)：管道进入插件方法，入sass()，uglify()等，返回还是stream流，可继续pip()gulp.dest(path)：输出到path路径的文件中执行gulp的任务-命令行中输入gulp [taskname]

文档详解说明

异步任务的支持

接受一个回调callback()

// 在 shell 中执行一个命令 var exec = require('child_process').exec; gulp.task('jekyll', function(cb) { // 编译 Jekyll exec('jekyll build', function(err) { if (err) return cb(err); // 返回 error cb(); // 完成 task }); });

返回stream？

gulp.task('somename', function() { var stream = gulp.src('client/**/*.js') .pipe(minify()) .pipe(gulp.dest('build')); return stream; });

返回promise？

var Q = require('q'); gulp.task('somename', function() { var deferred = Q.defer(); // 执行异步的操作 setTimeout(function() { deferred.resolve(); }, 1); return deferred.promise; });

顺序执行

案例：

gulp.task('two',['one'],function(){ }) //two 依赖与one的执行完成

注意的是：one 任务定义的时候需要在结束的时候返回一个回调，或者promise，或者stream

插件知识

问题与答案

在哪可以找到插件？ 答：http://gulpjs.com/plugins/在哪可以找到学习资料与总结？ 答：https://github.com/Platform-CUF/use-gulp

常用插件

gulp-prettifygulp-minify-css:压缩css文件gulp-rename：重命名，如给压缩后的文件重新命名，{suffix: '-rtl'}。参数添加后缀，同样可以添加{preffix:}的前缀。gulp-rtlcss：左右调换的插件

gulp-uglify：压缩js文件

gulp.src(['./assets/apps/scripts/*.js','!./assets/apps/scripts/*.min.js']) .pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('./html')); //*** HTML formatter task gulp.task('prettify', function() { gulp.src('./**/*.html') .pipe(prettify({ indent_size: 4, indent_inner_html: true, unformatted: ['pre', 'code'] })) .pipe(gulp.dest('./')); }); ```

gulp-sass:预编译sass 文件

如上图： 1. uglify()进行了js 的压缩 2. ！!./assets/apps/scripts/*.min.js忽视了已经压缩过的js 文件。 3. rename（）进行了重命名 4. .pip(sass()) 方法预编译sass文件 5. gulp-prettify ：格式化代码

转载于:https://www.cnblogs.com/enicz/p/gulp-de-ji-chu-yu-fa.html