之前使用过gulp,一直只是作为编译sass,压缩css和合并压缩js来使用,没有对其进行详细的开发发布环境配置,这几天在着重使用,所以重新完善了下gulpfile.js文件,在rollup和parcel大热的势头下,我真的是使用gulp的一股清流了,嘻嘻。

完善配置gulpfile.js

安装相关模块

首先你需要安装有nodejs,nodejs自身带有安装包工具npm,如何安装?(本文使用linux,其他OS类似),安装非常方便,点击这里,网上教程很多,这里不再赘述。
在工程目录下,打开命令行工具:

第一步:

1
$ npm init

之后一路回车,创建本地项目,主要是为了创建一份packeg.json文件,存放工程相关信息。

第二步:

1
2
$ npm i gulp -g
$ npm i gulp -D

-D 代表 –save-dev ,保存该模块到packeg.json的开发依赖里,-S 代表 –save 保存该模块到packeg.json的生产依赖里。

第三步:

1
$ npm i -D gulp-clean-css gulp-concat gulp-uglify gulp-sass gulp-clean gulp-babel babel-core babel-presets-env gulp-imagemin gulp-autoprefixer gulp-connect gulp-cache

安装所有相关gulp插件,保存到packeg.json开发依赖。

gulpfile.js

接下来,在项目工程根目录新建文件gulpfile.js,新建三个文件夹,分别是/src,/build/dist,分别为开发目录,本地环境目录以及线上生产目录。
在gulpfile.js中引入gulp所有相关插件。
像这样:

var gulp = require("gulp"),
cleanCss = require("gulp-clean-css"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
sass = require("gulp-sass"),
clean = require("gulp-clean"),
babel = require("gulp-babel"),
imagemin = require("gulp-imagemin"),
autoprefixer = require("gulp-autoprefixer"),
connect = require("gulp-connect"),
cache = require("gulp-cache");

view任务

gulp.task("view",function(){
return gulp.src("src/**/*.html")
    .pipe(gulp.dest("build/"))
    .pipe(connect.reload())
    .pipe(gulp.dest("dist/"))
})

创建gulp view任务,读取src下的所有.html文件,导入到build/下,拉取更新重载页面,之后再pipe到dist/。其中connect.reload()是热更新任务,稍后详细说明。

css任务

gulp.task("css",function(){
return gulp.src("src/scss/**/*.html")
    .pipe(sass())
    .pipe(autoprefixer({
            browsers: ["last 2 versions"]
        }))
    .pipe(gulp.dest("build/css"))
    .pipe(connect.reload())
    .pipe(cleanCss())
    .pipe(gulp.dest("dist/css"))
})

创建gulp css任务,读取src/scss下的所有.scss文件,编译sass文件,增加css3前缀,导入到build/css下,拉取更新重载页面,之后再压缩css,pipe到dist/css。其中connect.reload()同样是热更新任务。

js任务

gulp.task("js",function(){
return gulp.src("src/js/**/*.html")
    .pipe(babel({
            presets: ["env"]
        }))
    .pipe(concat("all.js"))
    .pipe(gulp.dest("build/js"))
    .pipe(connect.reload())
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
})

创建gulp js任务,读取src/js下的所有.js文件,编译es6语法为es2015文件,拼接为一个js文件,导入到build/js下,拉取更新重载页面,之后再压缩js,pipe到dist/js。其中connect.reload()同样是热更新任务。

image任务

gulp.task("image",function(){
return gulp.src("src/image/*")
    .pipe(gulp.dest("build/image"))
    .pipe(connect.reload())
    .pipe(cache(imagemin()))
    .pipe(gulp.dest("dist/image"))
})

创建gulp css任务,读取src/image下的所有文件,导入到build/image下,拉取更新重载页面,之后再读取缓存压缩image,pipe到dist/css。其中connect.reload()同样是热更新任务。

clean任务

gulp.task("clean",function(){
return gulp.src(["build/*.+(js|css|html|png|jpeg|svg|)","dist/*.+(js|css|html|png|jpeg|svg|)"], {read: false})
    .pipe(clean())
})

创建gulp clean任务,获取build/以及dist/下的所有文件,采用不读取的方式,直接删除所有文件。

watch任务

gulp.task("watch",function(){
    gulp.watch("src/js/**/*.js",["js"])
    gulp.watch("src/scss/**/*.scss",["css"])
    gulp.watch("src/**/*.html",["view"])
    gulp.watch("src/image/*",["iamge"])
})

创建gulp watch任务,读取src/下的所有相关.js .scss .html 以及图片格式文件,进行监听,如有变动即刻执行相应任务。

server任务

gulp.task("server",function(){
    connect.server({
        root: "build",
        livereload: true,
        port: 8080
    })
})

创建gulp server任务,启动热更新服务器,读取文件的根目录为build/,选择热更新为true,确定服务器端口为8080,再使用.pipe(connect.reload()),所有需要热更新的文件统一进行重载,就是前面view,css,js任务中的导入到build/后的相应操作,原因即是为实现浏览器的热更新。

default任务

gulp.task("default",["clean"],function(){
    gulp.start("server","js","css","view","image","watch")
})

启动默认任务,异步执行clean任务,删除所有文件,之后开始依次执行"server","js","css","view","image","watch"任务。

启动

设置gulp启动时的默认任务,在命令行执行

1
$ gulp

相当于执行

1
$ gulp default

写在最后:

gulp的stream式代码让所有任务看起来清晰易读,确实在当初grunt横行霸道引入前端工程化届的一股清流,但是越来越“懒”的人总想着不配置任何任务,让计算机尽可能处理多的事情。于是,2018,可能更多人回去拥抱parcel和rollup,拥抱明天。