gulp安装与使用

gulp

gulp CLI 全局安装
npm i -g gulp-cli

npm init 把项目初始化为node模块

package.json 保存项目依赖node模块的信息

1. 运行依赖：项目运行必须的
2. 开发依赖：开发项目所需要 --save-dev

npm i --save-dev gulp

gulp 不再支持同步

流

数据一块一块的从源头流出， 流入数据可以是无限的

watch 监听文件变化，触发task

Browdersync 和服务器建立 webdocket连接

browder-sync

目录结构

app
dist
gulpfile.js

第一个应用

var gulp = require('gulp');
gulp.task('hello', function(done) {
    console.log('Hello World!');
    done()
  });

4种匹配模式：

*.scss ： * 号匹配当前目录任意文件，所以这里 .scss 匹配当前目录下所有scss文件
**/.scss ：匹配当前目录及其子目录下的所有scss文件。
!not-me.scss ：！号移除匹配的文件，这里将移除not-me.scss
*.+(scss|sass) ：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。

执行预处理

gulp.task('sass', function(){
  return gulp.src('source-files')
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('destination'))
});

清理生成文件

var del = require(‘del’);
gulp.task(‘clean’, function() {
del(‘dist’);
});

监听Sass文件

gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', ['sass']);
  // Other watchers
})

使用Browser Sync自动刷新

browser-sync --save-dev

var browserSync = require('browser-sync');

Brower依赖管理

独立，可复用的代码包

npm i -g bower

脚手架Yeoman

npm i -g yo