gulp 教程 初级

GULP是什么

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。

如何安装GULP

在开始安装之前 你必须 安装node.js 没安装的 百度 node.js进行安装

当你安装好了 nodejs以后 就可以通过以下命令进行安装了

windows 下在 cmd mac 下在console

$ sudo npm install gulp -g

注意 只有MAC 电脑 需要sudo 获得相应权限

npm 命令的作用 是通过调用 nodejs 的node package manager 把 gulp 安装到你的电脑上面

-g 命令是告诉NPM进行全局安装 ，这样你在系统的任何地方都可以使用gulp 

如何创建gulp 工程

第一步 我们创建一个 project 文件夹作为我们的工程目录

windows环境下通过 cmd 命令进入这个 文件夹 运行

  $ npm init

这个 npm init 命令会创建一个叫做 package.json的文件 这个文件的作用就是存储这个工程的相关信息 例如依赖什么插件啊 之类的

大概样子就是上图所示

 一旦 你创建了 package.json 这个文件 我们就可以通过下面的命令 把gulp 安装到你的文件夹当中

npm install gulp --save-dev

看看 发现 现在的参数 和以前的不一样了 一个是 -g 一个是 --save-dev 这个参数的意思是告诉 电脑安装的gulp 必须依赖 package.json 里面的依赖

执行完命令以后你会发现你的project文件夹里面多了这些文件

现在 我们马上就可以用gulp进行工作了 但是在这之前 让我们来了解一下gulp的标准 工程目录

工程目录

gulp 的设计 非常灵活 可以让他适应各种各样的工程目录 你只需明白他的内部操作方式就行

|- app/
      |- css/
      |- fonts/
      |- images/ 
      |- index.html
      |- js/ 
      |- scss/
  |- dist/
  |- gulpfile.js
  |- node_modules/
  |- package.json

在上面的结构中 app 文件夹用来存放我们的 开发代码

dist文件夹 用来存放我们的 最终生产代码

编写你的第一条gulp命令

第一步使用 require

var gulp = require('gulp');

这句话的意思就是 node 会在 文件夹 node_module 中查找 require中 括号内的 名字，找到了就把它指派给变量 gulp

现在我们可以使用 gulp 变量了 GULP中 最基本的 结构如下

gulp.task('task-name', function() {
  // Stuff here
});

task-name 的意思是 执行 gulp 命令的名字 比如

gulp.task('hello', function() {
  console.log('Hello Zell');
});

那么我们就要执行 gulp hello

gulp 的预处理

通过gulp的插件 gulp-sass 我们可以通过gulp 来编译sass 文件

npm install gulp-sass --save-dev

首先我们执行上面的命令 安装 sass的插件

var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');

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

为了让这个 gulp sass 这个命令运行 我们必须 设置 source-file 和 destination 这两个路径 第一个路径 是我们存放 SASS文件的地方 第二个是 我们存放SASS 编译后的CSS样式文件的地方！

gulp.task('sass', function(){
  return gulp.src('app/scss/styles.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css'))
});

让我们 测试 运行一下

// styles.scss
.testing {
  width: percentage(5/7);
}

把这个文件放在 app/scss 这个文件夹下，运行 gulp sass 命令

/* styles.css */
.testing {
  width: 71.42857%; 
}

编译后的文件会出现在 app/css这个文件夹下面

但是 有时候我们需要编译多个 SASS文件时 怎么办呢 

NODE 通配符

 node 的通配符 我们可以简单理解为 ，通过一些特殊的符号 我们告诉NODE去编译执行特定的事情

 大多数 工作流程 都会使用到下面这4钟通配符 

 

第一种 :  *.scss 这个 统配符的作用 是 会匹配 该 项目 根目录下所有 后缀名 为.scss的文件

第二种 : **/*.scss 这个通配符 是 上面的升级版 它的作用是 会匹配 该项目 根目录 和根目录下所有的 子文件夹 下后缀 为.scss的文件

第三种 : !not-me.scss  "!"通配符 意思是 不要匹配 这个 文件

第四种 : *.+(scss | sass) 这个 通配的意思是 匹配 文件名为 scss 和 sass 结尾的 所有文件.

下面 我们来看看示例

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // 在app/scss 目录下 包括子目录 所有 的后缀名 为scss的 文件都会被匹配到
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
})

我们现在已经知道了 如何编译 一个或者多个SCSS 文件 ,但是我们不可能 每改一次 文件就执行一次 gulp sass命令 来编译 这样太麻烦了 ，那么怎样能让他自动编译呢！当我们修改某个 scss文件的时候？

监听 文件的变化

 gulp 为我们提供了一个watch()方法 用来监听文件的变化

 

// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']); 

 那么我们如何使用这个方法呢？

 假如我们需要 当SASS文件 改变的时候 就立刻编译所有的scss文件 

 第一个参数 我们放 文件的路径 或者 通配符 第二个参数 存放我们 编译 SASS的命令。

 

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

然后我们运行 gulp watch

当我们修改sass文件后 gulp 会帮助我们自动编译 ！

浏览器 自动刷新

相信大多数 前端 都已经按坏了F5 解放你的F5 

首先我们需要 和上面一样 安装一个 浏览器自动刷新的插件

$ npm install browser-sync --save-dev

安装完成后和上面一样 我们要使用 这个插件 必须先告诉 gulp

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

然后我们需要声明一个 TASK 指令 ，然后 我们还需要 告诉 插件 browserSync 我们的项目 根路径 在哪 在这里 就是APP文件夹喽

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
  })
})

现在 我们来实现一个小功能 当我们 修改SASS文件 运行 sass命令的 时候 我们希望CSS在浏览器中也相应的更新

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

在配置完上面的 以后 我们需要 配置我们的 watch task 这样 当我们修改 sass文件的时候 gulp会自动编译 并且顺便 把浏览器刷新了

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

OK  我们 现在完成了 这个小功能 下面 我们稍微扩展一下 既然 把CSS刷新了 为何 不把html js 也一并刷新了呢？

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('app/*.html', browserSync.reload); 
  gulp.watch('app/js/**/*.js', browserSync.reload); 
});

   CSS JAVASCRIPT 的优化 

       开发者 一般 在发布 到正式环境的 时候 都会对CSS和JS 进行一个压缩和合并

       但是 有一个问题就是 当我们将这种 工作 自动化进行的时候 往往几个文件压缩的顺序 并不是 我们想要的 

例如下面这个样子

<body>
  <!-- other stuff -->
  <script src="js/lib/a-library.js"></script>
  <script src="js/lib/another-library.js"></script>
  <script src="js/main.js"></script>
</body>

这里有三个脚本，他们在 两个不同的文件夹中，所以当我们 对他们合并的时候 如果用传统的方式 例如使用 gulp-concatenate

幸运的是，我们还有其他的解决办法 

gulp-useref 可以合并 多个 CSS 和JS 文件 到一个文件中，他通过这种形式的注释 

<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

   <type> 可以替换成 js css 或者 remove , 一般当你希望 合并什么类型的文件的时候 最好就将type设置成相应的格式  如果设置成 remove gulp 将不会合并 并生成新的文件

    下面我们来看看 该怎么配置 这个插件

   

$ npm install gulp-useref --save-dev

    

var useref = require('gulp-useref');

gulp.task('useref', function(){
  var assets = useref.assets();

  return gulp.src('app/*.html')
    .pipe(assets)
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest('dist'))
});

 和上面所有的插件都类似 首先声明我们需要这个插件 然后 声明我们的命令

 现在我希望 上面的三个JS 文件 都编译到一个JS文件当中 那么我们HTML的代码应该变成这样

<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

当我们运行命令 后 会得到这样的结果

现在我们合并了相关的文件 下面我们要对文件进行一个压缩 我们会使用一个 gulp-uglify这样的插件来帮助我们

$ npm install gulp-uglify --save-dev 

var uglify = require('gulp-uglify');

gulp.task('useref', function(){
  var assets = useref.assets();

  return gulp.src('app/*.html')
    .pipe(assets)
    .pipe(uglify()) // Uglifies Javascript files
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest('dist'))
});

gulp 现在 会自动合并压缩 js 文件 当你运行这个命令的时候

我们也可以 用同样的方式压缩我们的CSS文件

<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/another-stylesheet.css">
<!--endbuild-->

但是在压缩CSS的时候 我们并不希望使用 uglify 这样会让我们的样式 混杂在一起 我们压缩CSS希望使用 GULP-MINIFY-CSS这个插件

所以我们需要这样的 一个插件  gulp-if 

var minifyCSS = require('gulp-minify-css');
var gulpIf = require('gulp-if')

gulp.task('useref', function(){
  var assets = useref.assets();

  return gulp.src('app/*.html')
    .pipe(assets)
    // Minifies only if it's a CSS file
    .pipe(gulpIf('*.css', minifyCSS()))
    // Uglifies only if it's a Javascript file
    .pipe(gulpIf('*.js', uglify()))
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest('dist'))
});

在代码中我们可以看到 css 和js 是使用的不同的方法 来进行压缩的

图片压缩