• 前端修仙之路-二、如何用gulp搭建一套web前端开发框架(2)


    大家好,我是 “廖某某前端日志”,今天为大家分享一下前端开发的框架知识。

    这篇我们紧接着上一篇的内容来学习。

    回到上篇我们讲到的,已经可以用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构建工具串联起来,先做一个小型的框架,主要是将开发目录打包成生产目录。在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文件夹中创建以下文件夹河文件。

     顺便在css下的styl文件中,写一下stylus语句。

    div
      width 100px
      height 100px

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

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

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

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

  • 相关阅读:
    【MSSQL】MSSQL还原单mdf文件报1813错误
    【JSP】JSP基础学习记录(二)—— JSP的7个动作指令
    【JSP】JSP基础学习记录(一)—— 基础介绍以及3个编译指令
    【Other】U盘FAT32转NTFS且无数据丢失
    python map()
    python关于分割与拼接的那些事
    python shutil.copy()用法
    python enumerate用法
    工作中遇到一些难题1_5
    廖雪峰读书笔记_文件读写总结_2016_12_23
  • 原文地址:https://www.cnblogs.com/liao123/p/13607410.html
Copyright © 2020-2023  润新知