前端进阶之路-四如何利用gulp创建web前端开发框架(终)

Posted padding2020

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端进阶之路-四如何利用gulp创建web前端开发框架(终)相关的知识,希望对你有一定的参考价值。

大家好,我是“廖某某前端日志”,今天为大家讲讲前端的进阶技能。

通过前面三篇内容我们已经学习如何利用gulp插件和gulp脚手架来搭建一个完整的web前端框架,这篇就主要讲解将框架中的一些代码和文件独立,让框架项目结构更加清晰,也便于在日常开发中使用。
主要从下面四个步骤出发:
1.利用npm来运行框架。
2.代码整合
3.文件整合
4.如何配置和使用gitignore文件
首先我们先把第一步实现一下: 用npm来执行脚本命令。
看一下npm的强大功能之一,npm允许在package.json文件里面,使用scripts定义脚本命令。就像我们创建的package.json文件中,可以看到下面这一段:
scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
面代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每一个属性,对应一段脚本。比如,test命令对应的脚本是输出一串报错终止脚本。
我们在控制台中运行一下,输入:
npm run test

从上面截图可以看到,虽然报了个错,但是说明还是执行了那个test名称的脚本。
那么为什么要学习用npm来执行命令呢?当然有作用,因为我们接下来将用npm来运行gulpfile.js这个文件,不用gulp脚手架了。
那么我们改一下脚本运行命令test的执行:
"scripts": { "test": "gulp dev --env development" },

改成gulp执行开发环境的命令,然后在控制台中用npm再执行一下上面的命令,

可以看到项目已经在跑起来了。
通过上面的方法,我们省去了安装gulp脚手架的麻烦。那么将打包生产环境的脚本命令也添加到package.json文件中。
"scripts": { "dev": "gulp dev --env development", "build": "gulp dev --env production" },
可以通过在控制台运行“npm run dev” 和 “npm run build”就可以将项目运行起来和将项目打包。
上面已经把第一步完成了,下面接着讲第二、三步:代码和文件的整合。
我们需要在框架根目录下创建一main个文件夹,然后把框架根目录下的gulpfile.js、utils.js、config.js移入到main文件夹中并需要修改一下gulpfile.js中的代码:
const gulp = require('gulp');const stylus = require('gulp-stylus');const uglify = require('gulp-uglify');const cleanCss = require('gulp-clean-css');const postcss = require('gulp-postcss');const postcssrc = require('postcss-load-config');const connect = require('gulp-connect');const plumber = require('gulp-plumber'); // 避免出错task终止const minimist = require('minimist'); // 用于命令行传参数const gulpif = require('gulp-if'); // 用于命令行传参const cleanCSS = require('gulp-clean-css'); // 缩小css文件const changed = require('gulp-newer'); // 增量更新const babel = require('gulp-babel');const tinypng_nokey = require('gulp-tinypng-nokey'); //压缩图片--免keyconst opn = require('opn'); // 开启浏览器const del = require('del'); // 删除dist文件夹
const { getPort } = require('./utils');const Config = require('./config');// 命令行传参数const knownOptions = { string: 'env', default: { env: process.env.NODE_ENV || 'production' }};const options = minimist(process.argv.slice(2), knownOptions);// 检查端口冲突const checkPort = async () => { Config.connect.port = await getPort();};// 开启文件服务器const openServer = async () => await connect.server(Config.connect);// 自动打开浏览器const openBrowser = async () => { console.log('打开浏览器'); const { host, port } = Config.connect; const url = `http://${host}:${port}/view`; opn(url);};// html文件const htmls = () => { return gulp .src('src/view/**/*.html') .pipe(changed('src/view/**/*.html')) .pipe(plumber()) .pipe(gulp.dest('dist/view/')) .pipe(connect.reload());};// CSS文件const styles = () => { return gulp .src('src/css/**/*.styl') .pipe(changed('src/css/**/*.styl')) .pipe(plumber()) .pipe(stylus()) .pipe(gulpif(options.env === 'production', cleanCSS())) .pipe(gulp.dest('dist/css/')) .pipe(connect.reload());};// 图片文件const images = () => { return gulp .src('src/images/**/*') .pipe(changed('src/images/**/*')) .pipe(plumber()) .pipe(gulp.dest('dist/images/')) .pipe(connect.reload());};// 图片压缩const imgTiny = () => { return gulp .src('src/images/**/*') .pipe(changed('src/images/**/*')) .pipe(tinypng_nokey()) .pipe(gulp.dest('dist/images/')) .pipe(connect.reload());}// JS文件const scripts = () => { return gulp .src('src/js/**/*.js') .pipe(changed('src/js/**/*.js')) .pipe(plumber()) .pipe(babel()) //ES6转换 .pipe(gulpif(options.env === 'production', uglify())) .pipe(gulp.dest('dist/js/')) .pipe(connect.reload());};
//检测文件是否有更新const watchFiles = () => { gulp.watch('src/view/**/*.html', htmls); //检测到html文件更新,更新版本号 gulp.watch('src/css/**/*.styl', styles); gulp.watch('src/images/*', images); gulp.watch('src/js/**/*.js', scripts);};// 删除dist目录const clean = () => { return del(['dist']);};// 开发环境-不压缩JS、css和图片const devbuild = gulp.series( checkPort, gulp.parallel(openServer, htmls, styles, images, scripts), openBrowser, watchFiles);// 生产环境-不运行服务、不开启浏览器、代码压缩和图片压缩const prodbuild = gulp.series( clean, gulp.parallel(htmls, styles, imgTiny, scripts),);const build = options.env === 'production' ? prodbuild : devbuild; //判断是开发环境还是生产环境options.env === 'production' ? null : watchFiles();module.exports = build;
上面在gulpfile.js文件中做了导出模块,我们在根目录下再 创建个gulpfile.js文件(这个文件名用其他的不行,必须要用gulpfile,gulp命令必须需要找到gulpfile这个文件名才能正常运行,其他不行,诶,没办法了),写入下面代码:
const gulp = require('gulp');const build = require('./main/gulpfile.js');gulp.task('dev', build);
如果大家有点强迫症的话,我们只能修改main文件夹下的gulpfile.js文件名,就把它改成main.js,相应的再改一下根目录下gulpfile.js中的导入路径:
const gulp = require('gulp');const build = require('./main/main.js');gulp.task('dev', build);
接下来,在配置config.js文件中,封装项目资源的路径:
const { host } = require('./utils');
const folder = { src: 'src/', // 源文件目录 dist: 'dist/' // 文件处理目录};
const distFiles = folder.dist + '**'; // 目标路径下的所有文件
const Config = { connect: { root: 'dist', livereload: true, port: 1234, host }, src: folder.src, dist: folder.dist, distFiles: distFiles, html: { src: folder.src + 'view/**/*.html', dist: folder.dist + 'view/' }, css: { src: folder.src + 'css/**/*.styl', avoid: '!' + folder.src + 'css/stylus/*', dist: folder.dist + 'css/' }, js: { src: folder.src + 'js/**/*.js', dist: folder.dist + 'js/' }, images: { src: folder.src + 'images/**/*', dist: folder.dist + 'images/' }, libs: { src: folder.src + 'common/**/*', dist: folder.dist + 'common/' }};
module.exports = Config;
再来修改main.js代码中的静态资源路径为实参:
const gulp = require('gulp');const stylus = require('gulp-stylus');const uglify = require('gulp-uglify');const cleanCss = require('gulp-clean-css');const postcss = require('gulp-postcss');const postcssrc = require('postcss-load-config');const connect = require('gulp-connect');const plumber = require('gulp-plumber'); // 避免出错task终止const minimist = require('minimist'); // 用于命令行传参数const gulpif = require('gulp-if'); // 用于命令行传参const cleanCSS = require('gulp-clean-css'); // 缩小css文件const changed = require('gulp-newer'); // 增量更新const babel = require('gulp-babel');const tinypng_nokey = require('gulp-tinypng-nokey'); //压缩图片--免keyconst opn = require('opn'); // 开启浏览器const del = require('del'); // 删除dist文件夹
const { getPort } = require('./utils');const Config = require('./config');// 命令行传参数const knownOptions = { string: 'env', default: { env: process.env.NODE_ENV || 'production' }};const options = minimist(process.argv.slice(2), knownOptions);// 检查端口冲突const checkPort = async () => { Config.connect.port = await getPort();};// 开启文件服务器const openServer = async () => await connect.server(Config.connect);// 自动打开浏览器const openBrowser = async () => { console.log('打开浏览器'); const { host, port } = Config.connect; const url = `http://${host}:${port}/view`; opn(url);};// HTML文件const htmls = () => { return gulp .src(Config.html.src) .pipe(changed(Config.html.src)) .pipe(plumber()) .pipe(gulp.dest(Config.html.dist)) .pipe(connect.reload());};// CSS文件const styles = async () => { const config = await postcss(); return gulp .src([Config.css.src, Config.css.avoid]) .pipe(changed(Config.css.src)) .pipe(plumber()) .pipe(stylus()) .pipe(postcss(config.plugins, config.options)) .pipe(gulpif(options.env === 'production', cleanCSS())) .pipe(gulp.dest(Config.css.dist)) .pipe(connect.reload());};// 图片文件const images = () => { return gulp .src(Config.images.src) .pipe(changed(Config.images.src)) .pipe(plumber()) .pipe(gulp.dest(Config.images.dist)) .pipe(connect.reload());};// 图片压缩const imgTiny = () => { return gulp .src(Config.images.src) .pipe(tinypng_nokey()) .pipe(gulp.dest(Config.images.dist)) .pipe(connect.reload());}// JS文件const scripts = () => { return gulp .src(Config.js.src) .pipe(changed(Config.js.src)) .pipe(plumber()) .pipe(babel()) //ES6转换 .pipe(gulpif(options.env === 'production', uglify())) .pipe(gulp.dest(Config.js.dist)) .pipe(connect.reload());};
//检测文件是否有更新const watchFiles = () => { gulp.watch(Config.html.src, htmls); //检测到html文件更新,更新版本号 gulp.watch(Config.css.src, styles); gulp.watch(Config.images.src, images); gulp.watch(Config.js.src, scripts);};// 删除dist目录const clean = () => { return del(['dist']);};// 开发环境-不压缩JS、css和图片const devbuild = gulp.series( checkPort, gulp.parallel(openServer, htmls, styles, images, scripts), openBrowser, watchFiles);// 生产环境-不运行服务、不开启浏览器、代码压缩和图片压缩const prodbuild = gulp.series( clean, gulp.parallel(htmls, styles, imgTiny, scripts),);const build = options.env === 'production' ? prodbuild : devbuild; //判断是开发环境还是生产环境options.env === 'production' ? null : watchFiles();module.exports = build;
现在我们接着讲第四步:如何配置和使用gitignore文件。
我们需要了解一下gitignore文件是个啥东西呢?首先要强调一点,这个文件的完整文件名就是".gitignore",注意最前面有个“.”一般来说每个Git项目中都需要一个“.gitignore”文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。日常开发项目的时候,为了自己方便和同事方便,也一般会把项目提交都Git上,这样的话,这个gitignore文件可就是个好东西了,首先就我们现在创建的框架来说,先看一下现在的整体目录吧:

上图中里面圈出的目录就是现在的框架整体目录,如果我们需要将这个整体提交到git上,node_modules和dist这两个文件夹及其里面的内容是不用提交的。node_modules可以根据packa.json来安装,dist可以运行“npm run dev”或者“npm  run build”来创建。
所以完全是可以忽略掉这两个的。
那应该怎么做呢?我们同样在项目根路径下创建一个“.gitignore”文件,然后写入:
node_modules/dist/
“/”代表该文件夹下的所有。这样在每次push的时候,会自动忽略掉这两个文件夹里面的文件的。
写在最后:好久没有试过写这么长的教程了,记得写这么长的时候还是第一次写博客的时候,当时是去年还是去去年了,当时是做毕业设计的时候,当时还是Java出身的小白,现在已经转身走上了web前端的修仙之路了,有时候命运还是挺会捉弄人的哈。不想感慨太多,这个长篇教程可能有很多地方写的不是很好,但敬请大家见谅就好了。其实这个框架不是我做的,是我公司的前辈们做的,现在只不过是引用并写下心得教程啦~当然我在入职这个公司之前也还是有过gulp构建框架的基础,不过那个时候是用gulp和bower搭建过一套不是很完整的框架,入职这个公司之后,看到这个框架,才知道什么叫做大佬吧,虽然这里的功能不是很多,但够用和实用确实是够了的。当然,这个框架现在也算是开源了吧,哈哈~大家有需要的什么功能,比如:手机端自适应插件、版本hash值添加这些功能也是可以自行添加的,gulp上有很多实用的插件。这个就看个人需求了,后面的话,如果有空的话,也是会经常写开发中的日志,遇到的什么难题呀、有比较好用的UI之类的,跟大家分享一下嘛!

格言:人生没有彩排,每天都是现场直播!加油!

以上是关于前端进阶之路-四如何利用gulp创建web前端开发框架(终)的主要内容,如果未能解决你的问题,请参考以下文章

前端进阶之路-一如何用gulp搭建一套web前端开发框架

前端进阶之路-二如何用gulp搭建一套web前端开发框架

高级前端进阶,用gulp提升你的开发效率

前端进阶之路-利用Jenkins快速打造前端项目自动化工作流

WEB前端进阶之路 HTML 全路线学习知识点梳理(上)

前端自动化之路之gulp,node.js