阅读 1321

嘴对嘴教你使用Gulp

Markdown图片

什么是Gulp?

Gulp 是一个前端自动化工具,开发者可以使用它来处理常见任务:

  • 搭建web服务器
  • 文件保存时自动重载浏览器
  • 使用预处理器如Sass、LESS
  • 优化资源,比如压缩CSS、JavaScript、压缩图片

安装Gulp

  1. 安装Gulp之前你需要先安装Node.js

  2. 安装 gulp:

$ npm install gulp -g  // 全局安装gulp
$ npm install gulp --save-dev   // 作为项目的开发依赖(devDependencies)安装
复制代码

创建Gulp项目

首先,在新建项目文件夹目录下执行 npm init 命令:

<!-- 将创建一个package.json文件,保存着这个项目相关信息和插件依赖。 -->
$ npm init 
复制代码

补充项目相关信息后,进行局部安装Gulp

<!-- 使用—save-dev,将在package.json中添加gulp依赖 -->
<!-- 执行完之后,gulp将创建含有gulp文件夹的node_modules文件夹-->
$ npm install gulp --save-dev
复制代码

在package.json自动生成如下的Json内容:

{
  "name": "gulpdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "jw",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
  }
}
复制代码

Gulp开发构建

创建通用的webapp目录结构,并明确下项目的目录结构。(此例目录结构作为学习示范,非固定)

|-app/              <!--app文件夹作为开发目录(所有的源文件都放在这下面)-->
    |-css/              
    |-js/
    |-scss/
    |-images/
    |-fonts/
    |-index.html
|-dist/             <!--dist文件夹用来存放生产环境下的内容 -->
|-gulpfile.js       <!--配置gulp工具的搭建和使用 -->
|-node_modules/       
|-package.json      
复制代码

在项目的gulpfile.js文件中:

var gulp = require('gulp');
复制代码

这行命令告知Node去node_modules中查找gulp包,先局部查找,否则在全局环境中查找,并赋值使用gulp变量

牛刀小试:

gulp.task('hello', function() {
  console.log('Hello World!');
});
复制代码

命令行中执行:$ gulp hello,将会输出Hello World.

使用sass预处理插件

  1. 安装
$ npm install gulp-sass --save-dev
复制代码
  1. 引入插件
var gulp = require('gulp');
var sass = require('gulp-sass');
复制代码
  1. 使用
// 将对styles.scss进行预处理后生成styles.css
gulp.task('sass', function(){
    return gulp.src('app/scss/**/*.scss') //来源
      .pipe(sass())   //执行sass()
      .pipe(gulp.dest('app/css')) //生成
});
复制代码

补充:【常用的4种匹配模式】 *.scss : * 号匹配当前目录任意文件,所以这里 *.scss 匹配当前目录下所有scss文件 **/*.scss :匹配当前目录及其子目录下的所有scss文件。 !not-me.scss :!号移除匹配的文件,这里将移除not-me.scss *.+(scss|sass) :+号后面会跟着圆括号,里面的元素用|分割,匹配多个选项。这里将匹配scss和sass文件。


使用Browser Sync插件自动刷新

  1. 安装
<!-- 这里没有gulp-前缀,因为browser-sync支持Gulp -->
$ npm install browser-sync --save-dev
复制代码
  1. 引入
var browserSync = require('browser-sync');
复制代码
  1. 使用
gulp.task('browserSync', function() {
   browserSync({
     server: {
       baseDir: 'app'  //需要告知它,根目录在哪里
     },
   })
})
复制代码

使用watch监听方法

Gulp提供watch方法给我们,语法如下:

gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
复制代码

上例中的sass就可以改造成这样:

gulp.watch('app/scss/**/*.scss', ['sass']);
复制代码

通常我们监听的还不只是一个文件,把它变成一个任务:

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

执行gulp watch命令监听,每次修改文件,Gulp都将自动为我们执行任务。 4. 综合使用

我们稍微修改一下之前的sass设置,让每次css文件更改都刷新一下浏览器:

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') 
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true  //每次修改会自动刷新浏览器
    }))
});
复制代码

使用修改监听。

gulp.task('watch', function (){
  gulp.watch('app/scss/**/*.scss', ['sass']);
  // 当HTML或JS文件改变时,也重新加载浏览器
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);
})
复制代码

到目前为止,我们做了下面三件事:

  • 可运转的web开发服务
  • 使用Sass预处理器
  • 自动刷新浏览器

Gulp打包优化构建

将开发目录资源移到打包生产目录

<!-- 以字体资源举例 -->
gulp.task('fonts', function() {
  return gulp.src('app/fonts/**/*')
    .pipe(gulp.dest('dist/fonts'))
})
复制代码

多文件拼接成单一文件并压缩

  1. 安装
npm install gulp-useref --save-dev //文件拼接插件
npm install gulp-uglify --save-dev //js压缩插件
npm install gulp-minify-css --save-dev //css压缩插件
npm install gulp-if --save-dev //区分处理插件
复制代码
  1. 引用
var useref = require('gulp-useref')
var uglify = require('gulp-uglify')
var minifyCSS = require('gulp-minify-css')
var gulpIf = require('gulp-if')
复制代码
  1. 使用
--index.html--

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

<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/b-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
复制代码
--gulpfile.js--

gulp.task('useref', function(){
    return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.css', minifyCSS()))
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulp.dest('dist'))
  });
复制代码

图片优化(gulp-imagemin)

  1. 安装
$ npm install gulp-imagemin --save-dev
$ npm install gulp-cache --save-dev  //减少重复压缩
复制代码
  1. 引入
var imagemin = require('gulp-imagemin')
var cache = require('gulp-cache')
复制代码
  1. 使用
gulp.task('images', function(){
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
  // Caching images that ran through imagemin
  .pipe(cache(imagemin({
      interlaced: true
    })))
  .pipe(gulp.dest('dist/images'))
});
复制代码

清理生成文件(del)

由于我们是自动生成文件,我们不想旧文件掺杂进来

  1. 安装
$ npm install del --save-dev
复制代码
  1. 引入
var del = require('del')
复制代码
  1. 使用
//情景1:全部清除
gulp.task('clean', function() {
  del('dist');
});

//情景2:不清除图片文件
gulp.task('clean:dist', function(callback){
  del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});
复制代码

Gulp组合

gulp.task('build', [`clean:dist`, `sass`, `useref`, `images`, `fonts`], function (){
  console.log('Building files');
})
复制代码

但是这样Gulp会同时触发 [] 里的事件。我们要让clean在其他任务之前完成,所以引入 RunSequence插件

$ npm install run-sequence --save-dev  //安装
var runSequence = require('run-sequence') //引入
复制代码

改造后开发打包自动化构建:

// 构建打包
gulp.task('build', function (callback) {
  runSequence('clean:dist',
    ['sass', 'useref', 'images', 'fonts'],
    callback
  )
})
复制代码
// 开发过程
gulp.task('default', function (callback) {
  runSequence(['sass','browserSync', 'watch'],
    callback
  )
})
复制代码
关注下面的标签,发现更多相似文章
评论