Gulp学习记录

Gulp中文网
 Gulp插件库
 Gulp小教程1
Gulp小教程2
html中对js和css引用路径问题
 需要看的一个典型 🌰
前端乱炖上gulp介绍文章

gulp重要的几个命令

npm init
编写package.json
npm install --save-dev gulp（--save-dev的作用是讲安装默认填写到package.json中，不需要再进行手动添加）
npm install gulp-sass gulp-babel... --save-dev （安装各类gulp插件）
gulp (运行gulp)

gulp关键的几个API

gulp.task('name',function(){...})创建任务：任务名+相应的执行函数。taskname = default的时候，是$gulp命令默认的执行任务。
gulp.src()设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss, vender.scss]，也可以是正则表达式/**/*.scss．
gulp.run('task1','task2','task3'...)将各任务关联起来，定义任务执行顺序。
gulp.pipe()将（）内的执行语句添加到任务流中。将相应的插件导入任务流中。
gulp.watch()去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。
gulp.dest()能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

gulp常用的几个插件[看文档看文档看文档！！！]

页面及时刷新插件:npm包+chrome插件:youtube教程

要开启服务器，Webstorm里面打开就可以，必须要装浏览器插件，中间的小黑点代表浏览器与服务器相连。

检测js的正确性(gulp-jshint)需要借助jshint-stylish插件的作用
压缩图片gulp-imagemin
编译less文件(gulp-less)
将许多js文件链接起来(gulp-concat)
将文件重命名(gulp-rename)
采用ES6编译(gulp-babel)
改变html中js，css的引用路径问题(gulp-rev-collector)
对文件加上MD5后缀(gulp-rev)

gulp典型例子

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 检查脚本
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass()).on('error',function(e){
                console.log(e);
        })
        .pipe(gulp.dest('./css'));
});

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});

gulp.src(...)路径语法--Glob Primer

"Globs" are the patterns you type when you do stuff like ls *.js on
the command line, or put build/* in a .gitignore file.

Before parsing the path part patterns, braced sections are expanded
into a set. Braced sections start with { and end with }, with any
number of comma-delimited sections within. Braced sections may contain
slash characters, so a{/b/c,bcd} would expand into a/b/c and abcd.

The following characters have special magic meaning when used in a
path portion:

* Matches 0 or more characters in a single path portion
? Matches 1 character
[...] Matches a range of characters, similar to a RegExp range.
If the first character of the range is ! or ^ then it matches
any character not in the range.
!(pattern|pattern|pattern) Matches anything that does not match
any of the patterns provided.
?(pattern|pattern|pattern) Matches zero or one occurrence of the
patterns provided.
+(pattern|pattern|pattern) Matches one or more occurrences of the
patterns provided.
*(a|b|c) Matches zero or more occurrences of the patterns provided
@(pattern|pat*|pat?erN) Matches exactly one of the patterns
provided
** If a "globstar" is alone in a path portion, then it matches
zero or more directories and subdirectories searching for matches.
It does not crawl symlinked directories.

匹配模式[来自SF](https://segmentfault.com/a/1190000002955996)

)

var jshint = require('gulp-jshint');
var babel = require('gulp-babel');
var gulp = require('gulp');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');

gulp.task('sass', function () {
    return gulp.src('./*.scss')
        .pipe(sass().on('error', function (e) {
            console.log(e.message);
        }))
        .pipe(gulp.dest('./css/'));
});

gulp.task('babel', function () {
    return gulp.src('*.es6')
        .pipe(babel().on('error', function (e) {
            console.log(e);
        }))
        .pipe(gulp.dest('./js/'));
});

gulp.task('jshint', function () {
    gulp.src('*.js')
        .pipe(jshint().on('error', function (e) {
            console.log(e);
        }))
        .pipe(jshint.reporter('jshint-stylish'));
});

gulp.task('load', function () {
    livereload.changed('modal.html');
});

gulp.task('live', function () {
    livereload.listen();
    gulp.watch('*.*', function () { //不太妥当
        gulp.run('babel');
        livereload.reload('modal.html');
    });
});

gulp.task('default', function () {
    gulp.run('sass', 'babel', 'jshint', 'live');
});

未完待续....