Gulp的使用
什么是项目构建?
项目构建包括如下内容:
- 代码转换:将 TypeScript 编译成JavaScript、将 LESS 编译成 CSS等。
- 文件优化:压缩JavaScript、CSS、HTML 代码,压缩合并图片等。
- 代码分割:提取多个页面的公共代码,提取首屏不需要执行部分代码让其异步记在。
- 模块合并:在采用模块化的项目里会有很多个模块和文件,需要通过构建功能将模块分类合并成一个文件。
- 自动刷新:监听本地源代码变化,自动重新构建、刷新浏览器。
- 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
- 自动发布:更新代码后,自动构建出线上发布代码并传输给发布系统。
- 构建工具就是做以上这些事,将源代码转换成可以执行的JavaScript、CSS、HTML 代码。
构建环境的认识
我们对平时开发的代码区分了两种环境:
开发环境 development
- 自动编译运行项目、检查语法错误、详细的错误提示等... (能帮助程序员更好的写代码, 在内存中编译运行,没有任何文件输出)
生产环境 production
- 压缩代码、兼容性处理等...(生成打包后的项目文件,提供项目上线使用)
而我们使用的库也分为两种依赖:
开发依赖 devDependencies
- 项目构建打包需要的依赖
生产依赖 dependencies
- 项目上线运行时需要的依赖
gulp介绍
- gulp中文网:https://www.gulpjs.com.cn/
- gulp是与grunt功能类似的前端项目构建工具, 是基于nodejs平台运行
- 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的
合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务 - gulp更高效(异步多任务), 更易于使用, 插件高质量
- 使用gulp插件
- 下文中使用的插件你都可以在npm或者gulp官网上找到具体的使用用法,我下面说做的配置都是基础或者默认的,你也可以自行配置
gulp开发套路
开发套路:
- 去https://gulpjs.com/plugins/搜... gulp-xxx
- 打开插件的npm仓库 看文档使用
- 下载并引入gulp插件
- 配置插件任务
相关插件:
- gulp-eslint : js文件语法检查
- gulp-babel: js语法转换
- gulp-browserify: 将commonjs模块化转换浏览器能识别的语法
- gulp-connect: 用于运行网络服务器的Gulp插件
- open: 在用户首选的应用程序中打开文件或URL
- less-plugin-autoprefix: 使用autoprefixer从less转换后为css添加前缀。
- gulp-concat : 合并文件(js/css)
- gulp-uglify : 压缩js文件
- gulp-rename : 文件重命名
- gulp-less : 编译less
- gulp-clean-css : 压缩css
- gulp-cssmin: 压缩css
- gulp-livereload : 实时自动编译刷新
重要API
- gulp.src(filePath/pathArr) :指向指定路径的所有文件, 返回文件流对象,用于读取文件
- gulp.dest(dirPath/pathArr):指向指定的所有文件夹,用于向文件夹中输出文件
- gulp.task(name, [deps], fn):定义一个任务
- gulp.watch() :监视文件的变化
* 安装gulp
- npm install gulp-cli -g 全局安装
- npm install gulp --save-dev 局部安装
配置编码: gulpfile.js
- 将所有要配置的的代码写到里面
处理js文件
1、js文件语法检查
准备工作:创建js文件
- src/js/module1.js
- src/js/module2.js
- src/js/module3.js
- src/js/main.js
下载插件:
- npm install gulp-eslint --save-dev
配置编码
const gulp = require('gulp'); const eslint = require('gulp-eslint'); // 语法检查 必须有一个eslint的配置文件 gulp.task('eslint', function () { // 读取所有的js文件, 返回值就是一个可读流 return gulp.src(['src/js/*.js']) // 对流中的文件/数据进行语法检查 .pipe(eslint()) .pipe(eslint.format()) .pipe(eslint.failAfterError()) .pipe(livereload()); })
在package.json中配置eslint的检查项
"eslintConfig": { "parserOptions": { "ecmaVersion": 7, "sourceType": "module", "ecmaFeatures": { "module": true } } } //package.json文件内容,eslint的检查项放置位置 "author": "", "license": "ISC", "dependencies": {}, "devDependencies": {}, "eslintConfig": { "parserOptions": { "ecmaVersion": 7, "sourceType": "module", "ecmaFeatures": { "module": true } } }
- 运行指令:
gulp eslint
2、js语法转换
下载插件:
- npm install --save-dev gulp-babel @babel/core @babel/preset-env
配置编码
const babel = require('gulp-babel'); // babel能将es6模块化语法转换为commonjs模块化语法 // 能将es6及其以上的语法转换为es5及其以下的语法 gulp.task('babel', () => // 读取所有js文件 gulp.src('src/js/*.js') // 进行语法转换 .pipe(babel({ presets: ['@babel/preset-env'] //此处需要修改,官网有误 })) // 输出出去,输出路径 .pipe(gulp.dest('build/js')) );
- 运行指令:
gulp babel
3、将commonjs模块化转换浏览器能识别的语法
下载插件:
- npm install --save-dev gulp-browserify
- 注意:这里是将commonjs模块化语法后的js文件转换浏览器能识别的语法
配置编码
const browserify = require('gulp-browserify'); const rename = require("gulp-rename"); //重命名文件,为了不与babel产生的文件命名起冲突,可以保留banel产生的js文件 gulp.task('browserify', function() { // 只要放入口文件 return gulp.src('build/js/app.js') .pipe(browserify()) // 重命名文件 .pipe(rename("built.js")) .pipe(gulp.dest('build/js')) });
- 运行指令:
gulp browserify
4、压缩JS
下载插件:
- npm install --save-dev gulp-uglify
配置编码
const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); gulp.task('uglify', function() { return gulp.src('./build/js/built.js') .pipe(uglify()) .pipe(rename('dist.min.js')) .pipe(gulp.dest('./dist/js/')) }); gulp.task('js-prod', gulp.series('js-dev', 'uglify')); //顺序执行
- 运行指令:
gulp js-prod
处理less文件
准备工作:创建less文件
- src/less/test1.less
- src/less/test2.less
1.将less编译成css
下载插件:
- npm install gulp-less --save-dev
配置编码
const less = require('gulp-less'); gulp.task('less', function () { return gulp.src('./src/less/*.less') .pipe(less()) .pipe(gulp.dest('./build/css')) });
- 运行指令:
gulp less
2、压缩css
下载插件
- npm install gulp-clean-css less-plugin-autoprefix --save-dev
配置编码
//第一种方案,采用gulp-clean-css const cleanCSS = require('gulp-clean-css'); const LessAutoprefix = require('less-plugin-autoprefix'); const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] }); const connect = require('gulp-connect');合并css文件 gulp.task('css', function () { return gulp.src('./src/less/*.less') .pipe(less({ plugins: [autoprefix] //自动扩展样式的兼容性前缀 })) //将less文件转换成css文件 .pipe(concat('dist.min.css')) //合并css文件 .pipe(cleanCSS({compatibility: 'ie8'})) //压缩css文件 .pipe(gulp.dest('./dist/css')) }); //第二种方案,采用gulp-cssmin const cssmin = require('gulp-cssmin');合并css文件 const LessAutoprefix = require('less-plugin-autoprefix'); const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] }); //与LessAutoprefix相配合,使用autoprefixer从less转换后为css添加前缀,因为有些浏览器对一些带有前缀的css才能识别 const connect = require('gulp-connect'); gulp.task('css', function () { return gulp.src('./src/less/*.less') .pipe(concat('dist.min.css')) .pipe(less({ plugins: [autoprefix] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) });
- 运行指令:
gulp css
处理html
1.压缩html
下载插件:
- npm install gulp-htmlmin --save-dev
配置编码
var htmlmin = require('gulp-htmlmin'); //压缩html任务 gulp.task('html', () => { return gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true, // 去除空格 removeComments: true // 去掉注释 })) .pipe(gulp.dest('dist')); });
修改页面引入
<link rel="stylesheet" href="css/dist.min.css"> <script type="text/javascript" src="js/dist.min.js"></script>
- 运行指令:
gulp html
自动编译代码
下载插件
- npm install gulp-livereload --save-dev
配置编码:
const livereload = require('gulp-livereload'); //所有的任务最后加上 .pipe(livereload()) 这条代码决定自动编译哪个任务 gulp.task('watch', function() { livereload.listen(); gulp.watch('src/less/*.less', gulp.series('less')); gulp.watch('src/js/*.js', gulp.series('js')); });
- 运行指令:
gulp watch
自动打开/更新页面(热更新)
下载插件
- npm install gulp-connect open --save-dev
配置编码
// 自动化 --> 自动编译 --> 自动刷新浏览器(热更新) --> 自动打开浏览器 gulp.task('watch', function() { livereload.listen(); // 开启服务器 connect.server({ name: 'Dev App', root: ['build'], //提供服务的根路径 port: 3000, //开启端口号 livereload: true //是否实时刷新 }); // 自动打开浏览器,开启链接 open('http://localhost:3000'); // 监视指定文件,一旦文件发生变化,就执行后面的任务 gulp.watch('src/less/*.less', gulp.series('less')); gulp.watch('src/js/*.js', gulp.series('js-dev')); });
- 运行指令:
gulp watch
配置默认任务 --> 执行以上多个任务
// gulp.series()同步顺序执行,同一时间只能执行一个任务 速度慢 // gulp.parallel()异步执行,同一时间执行多个任务 速度快 gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); gulp.task('js-prod', gulp.series('js-dev', 'uglify')); gulp.task('build', gulp.parallel('js-dev', 'less')); // 生产环境的指令: gulp prod gulp.task('prod', gulp.parallel('js-prod', 'css', 'html')); // 开发环境的指令: gulp start gulp.task('start', gulp.series('build', 'watch'));
我的文件目录
下面是我的 gulpfile.js配置文件
// 引入gulp const gulp = require('gulp'); const eslint = require('gulp-eslint'); const babel = require('gulp-babel'); const browserify = require('gulp-browserify'); const rename = require("gulp-rename"); const less = require('gulp-less'); const livereload = require('gulp-livereload'); const connect = require('gulp-connect'); const open = require("open"); const uglify = require('gulp-uglify'); const LessAutoprefix = require('less-plugin-autoprefix'); // https://github.com/browserslist/browserslist const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] }); const cssmin = require('gulp-cssmin'); const concat = require('gulp-concat'); const htmlmin = require('gulp-htmlmin'); // 语法检查 必须有一个eslint的配置文件 gulp.task('eslint', function () { // 读取所有的js文件, 返回值就是一个可读流 return gulp.src(['src/js/*.js']) // 对流中的文件/数据进行语法检查 .pipe(eslint()) .pipe(eslint.format()) .pipe(eslint.failAfterError()) .pipe(livereload()); }) // 语法转换 // babel能将es6模块化语法转换为commonjs模块化语法 // 能将es6及其以上的语法转换为es5及其以下的语法 gulp.task('babel', () => // 读取所有js文件 gulp.src('src/js/*.js') // 进行语法转换 .pipe(babel({ presets: ['@babel/preset-env'] //此处需要修改,官网有误 })) // 输出出去 .pipe(gulp.dest('build/js')) .pipe(livereload()) ); // 将commonjs的模块化语法转换成浏览器能识别语法 gulp.task('browserify', function() { // 只要放入口文件 return gulp.src('build/js/app.js') .pipe(browserify()) // 重命名文件 .pipe(rename("built.js")) .pipe(gulp.dest('build/js')) .pipe(livereload()); }); // 压缩js代码 gulp.task('uglify', function () { return gulp.src('./build/js/built.js') .pipe(uglify()) .pipe(rename('dist.min.js')) .pipe(gulp.dest('dist/js')) }) // 将less编译成css gulp.task('less', function () { return gulp.src('./src/less/*.less') .pipe(less()) .pipe(gulp.dest('./build/css')) .pipe(livereload()); }); // 压缩css gulp.task('css', function () { return gulp.src('./src/less/*.less') .pipe(concat('dist.min.css')) .pipe(less({ plugins: [autoprefix] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }); // 压缩html gulp.task('html', () => { return gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true, // 去除空格 removeComments: true // 去掉注释 })) .pipe(gulp.dest('dist')); }); // 自动化 --> 自动编译 --> 自动刷新浏览器(热更新) --> 自动打开浏览器 gulp.task('watch', function() { livereload.listen(); // 开启服务器 connect.server({ name: 'Dev App', root: ['build'], port: 3000, livereload: true //热更新 }); // 打开浏览器 open('http://localhost:3000'); // 监视指定文件,一旦文件发生变化,就执行后面的任务 gulp.watch('src/less/*.less', gulp.series('less')); gulp.watch('src/js/*.js', gulp.series('js-dev')); }); // 配置默认任务 --> 执行以上多个任务 gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); gulp.task('js-prod', gulp.series('js-dev', 'uglify')); // gulp.task('default', gulp.parallel('eslint', 'babel', 'browserify')); gulp.task('build', gulp.parallel('js-dev', 'less')); // 生产环境的指令: gulp prod gulp.task('prod', gulp.parallel('js-prod', 'css', 'html')); // 开发环境的指令: gulp start gulp.task('start', gulp.series('build', 'watch'));
相关推荐
星辰的笔记 2020-07-04
liangjielaoshi 2020-06-11
zhongweinan 2020-06-10
jiangfulai 2020-04-18
UndefineOrNull 2020-02-29
我有一只小松鼠 2020-02-29
UndefineOrNull 2020-03-01
hlihaihong 2020-02-18
UndefineOrNull 2020-02-12
yinuoqingqin 2020-01-13
星辰的笔记 2020-01-13
UndefineOrNull 2020-01-13
hlihaihong 2020-01-13
kaosini 2020-01-12
hlihaihong 2020-01-12
kaosini 2020-01-12
HSdiana 2019-12-25