gulp配置过程遇到的坑

来源：互联网发布：实体店铺装修设计软件编辑：程序博客网时间：2024/05/21 21:46

return的作用
对’clean’定义的function而言，虽然函数本身已经执行完毕了，但是文件删除操作可能仍在进行 — gulp任务中的操作大多数都是数据流(Stream)的操作，其操作进度与函数执行无关。
如果需要在文件彻底清理后才开始执行’less’任务，则需要在’clean’任务中进行特殊编码：令其返回最终的数据流(Stream)对象：

gulp.task('clean', function() {    return gulp.src(['server/js/*.js'])            .pipe(clean());});

2.当html需要引入bower_components中的css文件时，需要配置bower.json参考以下博客https://segmentfault.com/q/1010000005666518

3.除了使用wiredep引入bower安装的文件以外，还可以使用gulp-inject。但是我比较建议使用wiredep。
https://www.npmjs.com/package/gulp-inject
引用官网示例：
gulpfile.js:

var bowerFiles = require('main-bower-files'),    inject = require('gulp-inject'),    stylus = require('gulp-stylus'),    es = require('event-stream');var cssFiles = gulp.src('./src/**/*.styl')  .pipe(stylus())  .pipe(gulp.dest('./build'));gulp.src('./src/index.html')  .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower'}))  .pipe(inject(es.merge(    cssFiles,    gulp.src('./src/app/**/*.js', {read: false})  )))  .pipe(gulp.dest('./build'));

src/index.html:

<!DOCTYPE html><html><head>  <title>My index</title>  <!-- bower:css -->  <!-- bower installed css files will go here... -->  <!-- endinject -->  <!-- inject:css -->  <!-- built css files will go here... -->  <!-- endinject --></head><body>  <!-- bower:js -->  <!-- bower installed scripts will go here... -->  <!-- endinject -->  <!-- inject:js -->  <!-- app scripts will go here... -->  <!-- endinject --></body></html>

4.browser-sync启动浏览器时一些参数的配置
http://www.browsersync.cn/docs/options/

阅读全文

0 0