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');
});

未完待续....