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

Posted padding2020

tags:

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

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

大家好,我是 “廖某某前端日志”,今天为大家分享一下前端开发的框架知识。
这篇我们紧接着上一篇的内容来学习。
回到上篇我们讲到的,已经可以用gulp快速构建工具来执行JS函数了,那么接下来我们来安装一下功能插件。
下面给大家介绍一些在开发中实用的gulp功能插件。
gulp-stylus //能将stylus语言打包成浏览器可运行的CSS代码gulp-clean-css //压缩css文件gulp-uglify //压缩JS代码
那么我们就先试试这么些插件,看看效果如何。
继续通过npm命令来安装,这次我就不用cmd控制台了,我用直接用编译器的控制台,比较方便。
在安装上面的插件之前,建议大家用cnpm来安装。因为一些npm下载一般比较慢。我们先通过npm 来安装一下cnpm,用的是淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功如上图所示
在控制台中输入以下命令:
cnpm install gulp-stylus gulp-uglify gulp-clean-css --save
npm是可以同时安装多个包的,不用用一个个单独安装,中间用空格隔开就好了( 注:截图中安装多了一个,不过没影响,后面会用到 )。
上面打印显示的已经安装成功了,当然也可以在package.json文件中查看 前端进阶之路-二、如何用gulp搭建一套web前端开发框架(2)
 可以看到相应的插件名称和版本号。
插件安装完成了,那么我们就开始把这些插件用gulp构建工具串联起来,先做一个小型的框架,主要是将开发目录打包成生产目录。在gulpfile.js文件中写入下面的代码,分别添加了html文件打包输出、stylus框架语言转css输出、图片打包输出、JS压缩打包输出。
const gulp = require('gulp');const stylus = require('gulp-stylus');const uglify = require('gulp-uglify');const cleanCss = require('gulp-clean-css');
// HTML文件const htmls = () => { return gulp.src('src/view/**/*.html').pipe(gulp.dest('dist/view/'));};// CSS文件const styles = () => { return gulp .src('src/css/**/*.styl') .pipe(stylus()) .pipe(cleanCss()) .pipe(gulp.dest('dist/css/'));};// 图片文件const images = () => { return gulp .src('src/images/**/*') .pipe(gulp.dest('dist/images/'));};// JS文件const scripts = () => { return gulp .src('src/js/**/*.js') .pipe(uglify()) .pipe(gulp.dest('dist/js/'));};
const prodbuild = gulp.series([htmls, styles, images, scripts]);gulp.task('default',prodbuild);
  代码写好之后 ,那么肯定是需要测试一下的。 首先我们需要在项目的根目录创建一个src文件夹,这个文件夹主要存放我们平时开发项目时的资源,比如html文件、图片、styl文件/sass文件/less文件/css文件、JS文件。创建src之后,我们继续在src文件夹中创建以下文件夹 文件。
前端进阶之路-二、如何用gulp搭建一套web前端开发框架(2)
顺便在css下的styl文件中,写一下stylus语句。
div width 100px height 100px

做完这些工作,我们在控制台中运行 gulp命令测试一下;

在运行命令之后,可以看到打印了框框中的语句,就说明是执行成功了。并可以在根目录中看到已经生成的dist文件夹,可以用dist来作为生产环境的文件存放。

现在的话一个简单的文件打包到生产环境已经算是完成了,那么下一篇我们升级一下这个简陋的框架。

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

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

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

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

基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构引入bootstrap前端框架

从原理到代码:大牛教你如何用 TensorFlow 亲手搭建一套图像识别模块 | AI 研习社

直播实录|大牛教你如何用 TensorFlow 亲手搭建一套图像识别模块

前端工程师的进阶之路