Gulp学习

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jplyue/article/details/75044929

一篇全面的链接： https://github.com/Platform-CUF/use-gulp

0. 理解Gulp

Gulp是 基于Node 的 Transform Streams，这是一个可读可写可做中间转换的 Streams 管道，由于从 src 到 dest 过程中，文件一直停留在 Streams 中，没有落地成为实体文件，所以整体运作效率非常高

来自http://www.barretlee.com/blog/2017/04/27/gulp-and-webpack/

感觉就像管道游戏的那个球，一直跟随着管道移动不落地==
Grunt一直是操作的文件，在操作过程中生成临时文件，所以比较慢。

1. 先去看了一篇超级简洁的安装文章

• gulp
• 官网
  安装好了gulp，大致知道如何使用

//安装gulp-cli
$ npm install --global gulp-cli

//给项目安装
$ npm install --save-dev gulp

//在根目录下创建gulpfile.js
var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

//Run gulp
$ gulp

2. 又看了一篇，补充知识点，这里列举了常用的gulp插件

gulp

引用插件的方法：

gulp.task('plugin',function(){
    gulp.src('sourcefile.xx')     //该任务针对的文件
        .pipe(taskName())      //该任务调用的模块
        .pipe(gulp.dest('src/destination.xx'));//将会在src/destination.xx
});

gulp.task("default",["watch"],function(){ //定义默认任务 并让gulp监视文件变化自动执行
    gulp.watch("sass/*.scss",["sass"]);       
})

• gulp-uglify(JS压缩)
• gulp-minify-html（html压缩）
• gulp-concat (js文件合并)
• gulp-less
• gulp-sass
• gulp-imagemin（图片压缩）
• Browserify 编译模块

3. API使用技巧

• gulpjs的使用介绍及技巧

4. 找了一个练习做

练习链接

练习1

第一个练习我就卡壳了==一开始漏看了步骤，安装顺序不一样都会报错==。今天早上仔仔细细重来的时候，遇到了这个错误
https://stackoverflow.com/questions/33984558/gulp-error-cannot-find-module-jshint-src-cli
昨天下班时候一筹莫展，今天瞬间解决了~白痴新手怎么知道要装俩==，安装jshint的时候记得装jshint和gulp-jshint

练习2

顺利通过

练习3

顺利