用gulp自动化构建项目

2019-02-16 本文已影响48人 jiaiqi

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

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

安装

Gulp官网有详细的安装教程，我以前也有篇文章介绍如何安装gulp的，本篇文章就不写了。

初始化项目

在项目文件夹下打开终端执行npm init命令

npm init

npm init命令会为你创建一个package.json文件，这个文件保存着这个项目相关信息。比如你用到的各种依赖（这里主要是插件）
一路回车就可以了

本地安装gulp

npm install gulp --save-dev

使用–save-dev，将通知计算机在package.json中添加gulp依赖。

创建gulp任务

先在根目录下创建gulpfile.js文件

/*gulpfile.js*/
var gulp = require('gulp');

这行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局环境中查找。
找到之后就会赋值给gulp变量，然后就可以使用它了。

最简单的demo

gulp.task('task-name', function() {
  console.log('hello,world!');
});

然后在命令行中执行gulp hello

就会输出“Hello World!”

利用gulp编译sass

sass最终输出的样式包括下面几种样式风格：
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed

使用npm install 命令安装
```
npm install gulp-sass --save-dev
```

在gulpfile中引入插件，用变量保存

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

在任务中使用

gulp.task('sass', function(){
  return gulp.src('source-files')//源文件路径
    .pipe(sass({outputStyle: 'compact'})) // 使用 gulp-sass 插件
    .pipe(gulp.dest('destination'))//输出路径
});

我们需要给sass任务提供源文件和输出位置。所以我们先在项目中创建app/scss文件夹，里面有个styles.scss文件。
这个文件将在gulp.src中用到。

sass处理之后，我们希望它生成css文件并产出到css目录下，可以这样写：

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

然后在命令行中运行gulp sass

通常我们不止有一个scss文件，这时候可以使用Node通配符。

Node中的通配符

通配符是一种匹配模式，允许你匹配到多个文件。不止是Node，很多平台都有，有点像正则表达式。

大部分时候，我们只需要用到下面4种匹配模式：

*.scss：*号匹配当前目录任意文件，所以这里*.scss匹配当前目录下所有scss文件
**/*.scss：匹配当前目录及其子目录下的所有scss文件。
!not-me.scss：！号移除匹配的文件，这里将移除not-me.scss
*.+(scss|sass)：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。

那么还是上面的栗子，改造一下：

gulp.task('sass', function() {
  return gulp.src('scss/**/*.scss') // 匹配在scss和它的子目录下的所有后缀为.scss的文件
    .pipe(sass())
    .pipe(gulp.dest('css'))
})

任何app下的scss文件，在执行命令之后将生成对应的css文件存放到相应路径。

现在我们能处理多个文件了，但是不想每次都要执行命令，怎么办？
Gulp就是为懒人而生的，我们可以使用watch命令，自动检测并执行。

监听文件

Gulp提供watch方法给我们，语法如下：

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

将上面的栗子再改下：

// Gulp watch syntax
gulp.watch('scss/**/*.scss', ['sass']);

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

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

在命令行执行gulp watch命令。

有了监听，每次修改文件，Gulp都将自动为我们执行任务。

优化css和JavaScript文件

说到优化的时候，我们需要想到：压缩，拼接。也就是减少体积和HTTP次数。
开发者面临的主要问题是很难按照正确的顺序合并文件。

<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-useref

gulp-useref会将多个文件拼接成单一文件，并输出到相应目录。

安装

npm install gulp-useref --save-dev`

引用

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

使用

gulp.task('useref', function(){

  return gulp.src('*.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));//这里将dist设为生产目录
});

执行useref命令，Gulp将合并三个script标签成一个文件，并保存到dist/js/main.min.js。

gulp-uglify

合并完之后，我们再来压缩。使用gulp-uglify插件。

安装

npm install gulp-uglify --save-dev

引用

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

使用

gulp.task('useref', function(){
  return gulp.src('*.html')
    .pipe(uglify())
    .pipe(useref())
    .pipe(gulp.dest('dist'))
});

执行useref命令，Gulp将合并三个script标签成一个文件，并保存到dist/js/main.min.js。

注意：执行完useref后，html中的script路径将只剩下main.min.js。

gulp-minify-css

gulp-useref同样可以用在css上。除了压缩，需要区分，其它内容同js一样。所以我们使用gulp-if来做不同处理。
使用gulp-minify-css压缩css。

安装

`$ npm install gulp-if gulp-minify-css --save-dev`

使用

var gulpIf = require('gulp-if');var minifyCSS = require('gulp-minify-css');gulp.task('useref', function(){  return gulp.src('app/*.html')    
// 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(useref())    
    .pipe(gulp.dest('dist'))
 });`

在项目中应用

规范目录结构

|- build/   --开发目录
    |- css/
    |- images/
    |- js/
    |- sass/
    |- index.html

|- dist     --发布目录
    |- css/
    |- images/
    |- js/
    |- index.html

|- gulpfile.js
|- node_modules/
|- package.json

上面是我自己习惯用的项目目录结构

gulpfile.js

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

gulp.task('watch', async ()=>{
    gulp.watch('./**/*', async()=>{        
        /*编译sass文件*/
        gulp.src('app/sass/**/*.scss')
        .pipe(sass({outputStyle: 'expanded'})) //展开输出方式
        .pipe(gulp.dest('app/css')) //输出到开发文件夹
        .pipe(sass({outputStyle: 'compressed'})) //压缩输出方式   
        .pipe(gulp.dest('dist/css')) //输出到发布文件夹          
        /*压缩js文件*/
        .pipe(uglify())     
        .pipe(gulp.dest('dist'))//将压缩后的js文件同步到发布文件夹     
        /*监控image文件，同步到发布文件夹*/
        gulp.src('app/images/*')
        .pipe(gulp.dest('dist/images'))       
        /*监控js文件，压缩后的文件输出到发布文件夹*/
        gulp.src('app/**/*.js')
        .pipe(gulp.dest('dist/js'))       
        /*监控css文件，同步到发布文件夹*/
        gulp.src('app/**/*.css')
        .pipe(gulp.dest('dist/css'))    
        /*监控开发文件夹下的所有html文件，同步到发布文件夹*/
        gulp.src('app/**/*.html')
        .pipe(gulp.dest('dist'))       
        /*将发布文件夹下所有文件部署到服务器*/
        gulp.src("dist/**/*")
        .pipe(gulp.dest("D:\\phpStudy\\WWW\\xiaoguantea"));
    });
});

我自己的项目目前只用过gulp-sass和gulp-uglify来编译scss文件和压缩js文件，刚接触gulp，边看官网文档一边参考别人博客的教程，难免有错误和不足之处，如果有发现哪里有问题可以私信我哟！