Gulp 学习笔记 （一）

因为课程需要开始学习gulp的使用，并在此记录

首先，何为gulp，就目前的学习来看，它可以代替你完成许多事情，比如代码压缩，scss文件编译等，虽然在Webstorm上这可以帮你完成，但是了解了解还是好的，就像是C++编程时自己练习写Makefile一样。

---

首先，对Gulp进行全局安装（OS为ubuntu）

sudo npm install -g gulp

完成后在项目文件夹根目录下执行命令

sudo npm install --save-dev gulp

ps: 如果没有package.json文件的话需要在项目文件夹根目录下先执行 npm init 命令

以下是对 --save-dev 的解释

--save 告诉npm把对应的包（package）信息添加至你的 package.json 文件中，这样就不需要你手动添加了

-dev 是指把这个包仅添加至当前的项目中，如果别人要使用你的项目的话这个包将不会下载至他的电脑中，这样的包举例来说就像是gulp , gunt 这样用来测试的库

来源点此

---

对gulp的第一次使用

在项目根目录下新建文件 ‘gulpfile.js’，在其中编写代码

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

此时保存文件，在终端中输入gulp， 输出‘Hello World’

• 第一行为引入gulp包
• 第三行 gulp.task() ,API原型为

gulp.task(name [,deps] , fn)

• name 为任务的名字，比如说name为 ‘abs’ , 那么在命令行中执行该任务时需要输入 gulp abs ， 如果任务名为default的话，则仅需要输入 gulp

• deps 为Array类型，如果执行当前任务里需要执行别的任务的话可以将它们的任务名写在里面，比如说执行 ‘abs’ 任务里需要执行 ‘aaaa’ 与 ‘bbbb’ 任务，则需要如下书写

    gulp.task('abs',['aaaa','bbbb'],function(){});

或者希望在命令行中输入一次命令后执行多个任务的话，可以这么写

    gulp.task('default',['m1','m2','m3']);

这样在终端中输入’gulp’ 的话就能执行 m1, m2, m3 任务了

• fn 任务的具体内容

---

使用gulp插件压缩代码

插件名： gulp-uglify

默认项目根目录下有文件夹 ‘js’ 用来存储js文件，文件夹 ‘build’用来存储压缩后的代码，此文件夹中有文件夹 ‘js’ , ‘css’

首先， 使用npm安装插件

sudo npm install --save-dev gulp-uglify

// gulpfile.js    var gulp = require('gulp'),        uglify = require('gulp-uglify');    gulp.task('default',function(){        gulp.src('js/*.js')    // 获取js文件夹下所有后缀为.js的文件，并输出            .pipe(uglify())    //接受前者传出的数据，并将其传入uglify中进行压缩，并输出            .pipe(             //接受前者传出的数据，并将其传入gulp.dest()中                gulp.dest('build/js/' //将压缩完毕的文件传入指定文件夹中，即'build/js/'文件夹中                )            );    })；

在命令行中输入指令 ‘gulp’ ，在转到 ‘build/js/’ 文件夹下即可看到压缩完毕的代码

---

使用watch()方法监听文件变化，自动进行压缩等操作

一次一次地在命令行中执行重复的指令太麻烦了，好在gulp提供了watch方法，比如说更改一次js文件，保存时watch()可以发现这个改变，并重新压缩此文件

    var gulp = require('gulp'),        uglify = require('gulp-uglify');    gulp.task('scripts',function(){        gulp.src('js/*.js').pipe(uglify()).pipe(gulp.dest('build/js/'));    });    gulp.task('watch',function(){        gulp.watch('js/*.js'   //监听此处文件是否发生变化            ,['scripts']       //如果发生变化，则执行'scripts'方法            );    });    gulp.task('default',['watch']);

使用插件实时编译scss文件

• 插件：gulp-sass 基于nodejs实时编译sass/scss文件
• 插件：gulp-plumber 编译出错是保持监听状态，而不是结束执行

//默认根目录下存在sass文件夹存放所有scss文件，build文件夹内css文件夹存放编译好的css文件    var gulp = require("gulp"),        uglify = require("gulp-uglify"),        sass = require("gulp-sass"),        plumber = require("gulp-plumber");     gulp.task('styles',function(){        return gulp.src("sass/**/*.scss")                   .pipe(plumber())                   .pipe(sass.sync({                        outputStyle:'compressed',                        errLogToConsole:true                   }))                   .pipe(gulp.dest('build/css/'));    });    gulp.task('watch',function(){        gulp.watch('sass/**/*.scss',['styles']);    });    gulp.task('default',['watch']);