gulp自动化开发

前端项目搭建

前端我们使用gulp来自动化开发流程.配置好gulp后,可以自动给我们处理好一些工作.比如写完css后,要压缩成.min.css,写完js后,要做混淆和压缩,图片压缩等.这些工作都可以让gulp帮我们完成.

安装gulp

1.创建本地包管理环境:

使用npm init命令在本地生成一个package.json文件,package.json是用来记录你当前这个项目依赖了哪些包,以后别人拿到你这个项目后,不需要你的node_modules文件夹(因为node_modules中的包实在是太庞大了).只需要执行npm install命令,就会自动安装package.json下devDependencies中制定的依赖包.

2.安装gulp

gulp的安装非常简单,只要使用npm命令安装即可.但是因为gulp需要作为命令行的方式运行,因此需要安装在系统级别的目录中.
这个项目用的到gulp版本是3.9.1，因此安装的时候最好指定一下版本。

    npm install  -g gulp@3.9.1

因为在本地需要使用require的方式gulp.因此也需要在本地安装一份:

    npm install --save-dev gulp@3.9.1

以上的--save-dev是将安装的包添加到package.json下的devDependencies依赖中.以后通过npm install即可自动安装.
devDependencies这个是用来记录开发环境下使用的包,如果想要记录生产环境下使用的包,那么在安装包的时候使用npm install xx --save-dev就会记录到package.json下的devDependencies中,devDependencies是专门用来记录生产环境下的依赖包的!

3.创建gulp任务

要使用gulp来流程化我们的开发工作.首先需要在项目的根目录下创建一个gulpfile.js文件.然后在gulpfile.js中填入以下代码:

// 导入node_modules包下的gulp
var gulp = require("gulp");

// task(任务的名字，匿名函数)
gulp.task("greet",function(){
    console.log("hello world");
});

这里对代码进行一一解释:
1.通过require语句引用已经安装的第三方依赖包.这个require只能是引用当前项目的,不能引用全局下.require语法是node.js独有的,只能在node.js环境下使用.
2.gulp.task是用来创建一个任务.gulp.task的第一个参数是命令的名字,第二个参数是一个函数,就是执行这个命令的时候会做什么事情,都是写在这个里面的.
3.写完以上代码后,以后如果想要执行greet命令,那么只需要进入到项目所在的路径,然后终端使用gulp greet即可执行.

4.创建处理css文件压缩的任务:

gulp只是提供一个框架给我们.如果我们想要实现一些更加复杂的功能.比如css压缩,那么我们还需要安装以下gulp-cssnano插件.gulp相关的插件安装也是通过npm命令安装,安装方式跟其他包是一模一样的(gulp插件本身就是一个普通的包).
对css文件的处理,需要做的事情就是压缩,然后再将压缩后的文件放到制定的目录下(不要和原来的css文件重合了)! 这里我们使用gulp-cssnano来处理这个工作:

    npm install gulp-cssnano --save-dev

然后在gulpfile.js中写入以下代码:

var gulp = require("gulp");
var cssnano = require("cssnano");

// 定义一个处理css文件改动的任务
gulp.task("css",function(){
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(gulp.dest("./css/dist/"));
});

以上代码进行详细解释:
1.gulp.task:创建一个css处理的任务.
2.gulp.src:找到当前css目录下的所有以.css结尾的css文件.
3.pipe:管道方法.将上一个方法的返回结果传给另外一个处理器.比如以上的cssnano.
4.gulp.dest:将处理完后的文件,放到指定的目录下.不要放在和原文件相同的目录,以免产生冲突,也不方便管理.

5.修改压缩后的文件名

像以上任务,压缩完css文件后,最好是给他添加一个.min.css的后缀,这样一眼就能知道这个是经过压缩后的文件.这时候我们就需要使用gulp-rename来修改了.当然首先也需要安装npm install gulp-rename --save-dev 示例代码如下:

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");

gulp.task("css",function(){
    gulp.src("./css/*.css")
    .pipe(cssnano())
    // suffix 后缀名  prefix 前缀名 rename({'suffix':'.min','prefix':'my.'})
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
});

在上述代码中,我们增加了一行.pipe(rename({"suffix":".min"})),这个我们就是使用rename方法,并且传递一个对象参数,指定修改名字的规则为添加一个.min后缀名.这个gulp-rename还有其他的指定文件名的方式,比如可以在文件名前加个前缀等.更多的教程可以看这里:https://www.npmjs.com/package/gulp-rename.

6.创建处理js文件的任务

处理js文件,我们需要使用到gulp-uglify插件,安装命令如下:
npm install gulp-uglify --save-dev

安装完后,我们就可以对js文件进行处理了.示例代码如下:

var gulp = require("gulp");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");

gulp.task("js",function(){
    return gulp.src("./js/*.js")
    .pipe(uglify({
        // 对变量名进行处理.
        'toplevel':true
    }))
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dist/js/"))
});

这里就是增加了一个.pipe(uglify())的处理,对js文件进行压缩和丑化(修改变量名)等处理.更多关于gulp-uglify的教程.请看https://github.com/mishoo/UglifyJS2#minify-options.

7.合并多个文件

在网页开发中,为了加快网页的渲染速度,有时候我们会将多个文件压缩成一个文件,从而减少请求的次数.要拼接文件,我们需要用到gulp-concat插件,安装命令如下:
npm install gulp-concat --save-dev

比如我们现在有一个nav.js文件用来控制导航条的.有一个index.js文件用来控制首页整体内容的.那么我们就可以使用以下代码将这两个文件合并成一个文件:

var gulp = require("gulp");
var rename = require("gulp-rename");
var gulify = require("gulp-uglify");
var concat = require("gulp-concat");

gulp.task("js",function(){
    return gulp.src("./js/*.js")
    // 将index.js和nav.js合并成一个js文件
    .pipe(concat("index.js"))
    .pipe(uglify({
        'toplevel':true
    }))
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dist/js/"))
});

8.压缩图片

最初使用gulp-imagemin压缩，明明配置没问题，但是执行任务的时候报错，具体原因在哪儿也没找到，可能是因为插件版本或者node版本的问题。于是改用第二个插件：gulp-tinypng-nokey

为什么要网站要压缩图片？

图片是限制网站加载速度的一个主要原因.图片越大,从网站上下载所花费的时间越长.因此对于一些图片,我们可以采取无损压缩,即在不改变图片质量的基础之上进行压缩.在gulp中我们可以通过gulp-tinypng-nokey来帮我们实现.安装命令如下:

    npm install gulp-tinypng-nokey --save-dev

压缩图片也是一个比较大的工作量,对于一些已经压缩过的图片,我们就没有必要再重复压缩了.这时候我们可以使用gulp-cache来缓存那些压缩过的图片,安装命令如下:

    npm install gulp-cache --save-dev

两个插件结合使用的代码如下：

var gulp = require('gulp');
var tinypng_nokey= require('gulp-tinypng-nokey');
var cache = require('gulp-cache');
gulp.task('image',function(){
    gulp.src("./images/*.*")
    .pipe(cache(tinypng_nokey()))
    .pipe(gulp.dest('./dist/images/'));
});

9.监听代码修改

以上所有的任务,我们都是需要手动的在终端去执行.这样很不方便我们开发.最好的方式就是我修改了代码后,gulp会自动的执行相应的任务.这个工作我们可以使用gulp内置的watch方法帮我们完成:

var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")

gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
});
/*
gulp 3.9.1版本的wach监听
gulp.task('watch',function(){
	gulp.watch('./css/*.css',['css']);
});
*/

// 4.X版本定义一个处理css文件改动的任务
gulp.task("watch",function(){
    // 监听所有的css文件,然后执行css这个任务
    gulp.watch("./css/*.css",gulp.series('css')
});

以后只要在终端执行gulp watch命令即可自动监听所有的css文件,然后自动执行css的任务,完成相应的工作.
注意 4.0版本的gulp已经不支持不支持gulp.watch("./css/*.css",['css']这样的写法了,正确的写法是gulp.watch("./css/*.css",gulp.series('css')

10.自动刷新浏览器

以上我们实现了更改一些css文件后,可以自动执行处理css的任务.但是我们害死需要手动的去刷新浏览器,才能看到修改后的效果.有什么办法能在修改完代码后,自动的刷新浏览器呢.答案就是使用browser-sync.安装命令如下:

    npm install browser-sync --save-dev

browser-sync使用的示例代码如下（gulp3.9.1版本）:

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');
var bs = require('browser-sync').create();

gulp.task('css',function(){
	gulp.src('./css/*.css')
	.pipe(cssnano())
	.pipe(rename({'suffix':'.min'}))
	.pipe(gulp.dest('./css/dist/'))
	.pipe(bs.stream());
});
gulp.task('watch',function(){
	gulp.watch('./css/*.css',['css']);
});
gulp.task('bs',function(){
	bs.init({
		'server':{
			'baseDir':'./'
		}
	})
});
gulp.task('server',['bs','watch']);

browser-sync使用的示例代码如下（gulp4.x版本）:

// gulp4.x自动刷新浏览器:方法一
var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
var bs = require("browser-sync").create()

// 定义一个处理css的任务
gulp.task("css",function (done) {
    gulp.src("./css/*.css")
    .pipe(cssnano())
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./css/dist/"))
    .pipe(bs.stream());
    //记住,所有的task()都要这样做(done参数+done()回调,否则无法重新调用这个函数了)
    done()
});

// 定义一个处理css文件改动的任务
//执行gulp server 开启服务器
gulp.task("server",function(done){
    bs.init({
        'port':3000,
        'server':{
            'baseDir':"./"
        }
    });
    gulp.watch("./css/*.css",gulp.series('css')
    done()
});

// 方法二
// 定义监听文件修改的任务
gulp.task("watch",function () {
    gulp.watch(path.css+"*.css",gulp.series("css"));
    gulp.watch(path.js+"*.js",gulp.series("js"));
    gulp.watch(path.images+"*.*",gulp.series("images"));
    gulp.watch(path.html+'*.html',gulp.series("html"));
});
// 初始化borwser-sync的任务
gulp.task("bs",function () {
    bs.init({
        "server":{
            "baseDir":"./"
        }
    })
});
// 创建一个默认的任务,来执行以上任务
gulp.task("default",gulp.series(gulp.parallel("bs","watch")));

11.gulp3.9.1版本我的gulp代码

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var tinypng_nokey = require('gulp-tinypng-nokey');
var cache = require('gulp-cache');
var bs = require('browser-sync').create();

gulp.task('greet',function(){
	console.log('hello!')
});

gulp.task('css',function(){
	gulp.src('./css/*.css')
	.pipe(cssnano())
	.pipe(rename({'suffix':'.min'}))
	.pipe(gulp.dest('./css/dist'))
	.pipe(bs.stream());
});


gulp.task('js',function(){
	gulp.src('./js/*.js')
	.pipe(concat('index'))
	.pipe(uglify({
		// 对变量名进行丑陋处理
		'toplevel':true
	}))
	.pipe(rename({'suffix':'.min'}))
	.pipe(gulp.dest('./js/dist'));
});


gulp.task('image',function(){
	gulp.src('./images/*')
	.pipe(cache(tinypng_nokey()))
	.pipe(gulp.dest('./dist/images/'));
});

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


gulp.task('bs',function(){
	bs.init({
		'server':{
			'baseDir':'./'
		}
	})
});

gulp.task('server',['bs','watch']);