Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里.前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS.解析模板以及在文件变动时编译LESS文件(当然这些只是一小部分例子). Gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜…

ES6已经火了好久了,我却一直没有在项目中尝试过使用ES6写代码,只是写过几个Demo,在大型项目中使用ES6这件事,我一直不太敢做.最近公司要求做一个小的H5活动专题,我想不如就在这个小项目中使用ES6,一方面积累一些经验为大型项目做准备.另一方面小型的活动专题不涉及后期维护,从成本上我并没有冒太大的风险.下面我简单介绍一下我搭建的ES6 环境. 虽然移动平台是webkit大行其道,并且webkit对ES6支持的还不错,但是我并不打算webkit内核裸跑ES6.我选择了预编译的方案——babe…

es6是什么?借着这个话题,我想说:身为web前端的工作者连es6没听说,转行吧. demo的代码如下: 源码下载 或者 gitclone地址: git@git.oschina.net:sisheb/gulpdemo.git 1.gulp用到开发plugins如下: "devDependencies": { "babel-preset-es2015": "^6.24.1", //es2015转码规则 "gulp": "…

1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的ES6语法编译为ES5语法,下面就开始搭建一个基于webpack+babel的ES6语法运行环境. 2.需要安装的包 搭建环境之前我们需要安装以下JS包: webpack(安装webpack,必装) babel-loader和babel-core(babel转码器,必装) babel-preset-…

错误信息如下: 解决方法: 1,先安装babel-preset-es2015到项目中, cnpm install babel-preset-es2015 --save-dev2,在项目根目录中新建一个.babelrc文件,  文件内容为 { "presets": [ "es2015" ]}…

1.初始化项目 在项目根目录创建 package.json 文件 npm init //或者 npm init -y 2.安装babel-cli脚手架 npm install babel-cli --save 3.配置文件.babelrc 在项目根目录新建文件,命名为:.babelrc.(注意:以点开头且以点结束的文件,即文件没有扩展名) 3.1.设定转码规则 npm install --save-dev babel-preset-latest //或者 npm install --save-d…

一 开始 1 全局安装脚手架 npm install -g create-react-app 这有个坑,就是在window下安装一直会报错,报错信息如下: 解决办法:在开始菜单栏里打开cmd的时,右击选择“以管理员身份运行”.然后再在打开的cmd里运动install就没问题了. 2 通过脚手架搭建项目 create-react-app <项目名称> 3 开始项目 cd <项目名> npm run start 二. 查看项目 package.json 信息 1  package.js…

首先进入Intellij Idea的官方网站:点击打开链接 点击download,选择旗舰版进行下载.网上的破解教程很多,也可以注册一个学生账号拿到一年的免费试用权. 安装过程不再细说,第一次打开选择你喜欢的配置,然后进入主界面. 点击File->Settings...->Plugins,在里面搜索python,如下图所示: 点击旁边绿色的install,稍等片刻即可完成安装.安装完成后原本的install按钮变成了restart,说明需要重启Intellij Idea.点击按键即可重启. 这…

前言 对用户态进程,利用gdb调试代码是很方便的手段.而对于内核态的问题,可以利用crash等工具基于coredump文件进行调试. 其实我们也可以利用一些手段对Linux内核代码进行gdb调试,qemu就是一种. qemu是一款完全软件模拟(Binary translation)的虚拟化软件,在虚拟化的实现中性能相对较差.但利用它在测试环境中gdb调试Linux内核代码,是熟悉Linux内核代码的一个好方法. 本文实验环境: ubuntu 20.04 busybox-1.32.1 Linux…

GitHub原文:https://github.com/x113773/testall/issues/22 首先安装Cygwin 1:首先去网站 www.cygwin.com 下载 Cygwin 的 Windows系统的安装包,32位系统下载steup-x86.exe,64位系统则下载steup-x86_64.exe,界面如下. ​2:双击下载好的Cygwin安装包,出现下面界面,点击下一步. ​3:之后出现如下界面,默认为第一个选项,意思是从网络下载并安装(从官网下载的不是完整安装包,只是安装…

1.更新系统 yum install epel-release #rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm #rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm yum update 2.安装 BT 面板,可先配置防火墙,放行 FTP.HTTP.MySQL 以及宝塔面板端口 yum install -…

使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器又没有同步更新版本,或者是新版本的浏览器没有对ES6的特性进行兼容,那浏览器肯定是无法识别我们所写的ES6代码,所以假如想直接编写ES6代码在浏览器执行,结果由于兼容性问题只能是报错.那么浏览器不支持,而我们又想用ES6语法编写JS代码怎么办,针对这个问…

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的…

1. 安装webpack npm install webpack --save-dev 2. 安装babel  实现 ES6 到 ES5 npm install --save-dev babel-core babel-preset-es2015 3.安装 babel-loader npm install --save-dev babel-loader webpack.config.js完整配置 module.exports = { entry: './src/js/app.js', output…

0.前言 相信点进来看这篇文章的同学们已经对 Docker Dompose 有一定的了解了,下面,我们拿最简单的例子来介绍如何使用 Docker Compose 来管理项目. 本文例子: 一个应用服务( Spring Boot 的 jar 包). Mysql 服务和 Redis 服务.在每次启动,我们要先将 Mysql 容器和 Redis 容器启动起来,再将应用容器运行起来,这其中还不要忘了在创建应用容器时将容器网络连接到 MySQL 容器和 Redis 容器上,以便应用连接上它们并进行数据交换…

利用Jenkins+Gitlab搭建持续集成(CI)环境 Permalink: 2013-09-08 22:04:00 by hyhx2008in intern tags: jenkins gitlab distcc ci 这次实习的任务之一就是搭建一个持续集成(Continuous Integration)环境. 我们选择Jenkins作为持续集成工具,其优点是提供web GUI配置界面,方便配置,还可以安装很多第三方插件(plugin)进行定制与扩展,功能强大. 其次选择Gitlab作为gi…

工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法.如果你听过我Vue课程的话,应该知道Webpack是有自动编译转换能力的,除了Webpack自动编译,我们还可以用Babel来完成.这节课我们就使用Babel把ES6编译成ES5. ** 建立工程目录: ** 先建立一个项目的工程目录,并在目录下边建立两个文件夹:src和dist src…

目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使用的 Gulp npm install --save-dev gulp 安装 Gulp 上 Babel 的插件 npm install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件 npm install --save-dev babel-pre…

文件目录 package.json { "name": "my-vue", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "serve": "rollup -c -w" }, "ke…

使用babel编译ES6 babel是一个工具,可以通过多个平台,让js文件从ES6转化成ES5,从而支持一些浏览器并未支持的语法. Insall babel $ sudo npm install babel -g #全局安装 $ babel demo.js -o demo-compile.js #编译并产出 当然它还支持grunt/gulp和node和meteor....这里就不列举,如何在这些地方使用了,可以自行查阅其官网:babel 完成这些操作后,我们就可以开始我们的ES6的学习之旅.…

说明:es6语法已经越来越普及,但是一些低版本的浏览器不支持es6的语法特性,所以我们在开发完前端项目后,往往需要统一把前端es6的代码编译成es5的代码.本文介绍的就是如何手动和自动的把es6转成es5的方法.本文前提:需要提前安装好nodejs环境,能够使用npm命令.如果不了解如果配置npm,可以查看笔者前几次的博文. 使用babel来手动构建es5的方式: 1.创建一个空的前端项目 可以使用webStorm等前端工具创建一个空的项目即可. 并创建src/main.js,文件内容如下,其中…

现在ES6盛行,开始大量使用ES6的特性敲代码,但限于Node.js本身对ES6的特性支持的不够完备,那么需要借助于其他工具来完成. 基本上,现在都直接写ES6的代码,然后使用babel-cli提供的babel转换成ES5或者使用babel-node直接运行ES6的代码. 安装 执行命令,全局安装babel-cli. npm install babel-cli -g babel-cli有两个主要的命令需要用到: babel:按照“.babelrc“文件转码js文件. babel-node:提供一…

npm install --save-dev gulp npm install --save-dev gulp-babel npm install --save-dev babel-preset-es2015 gulp配置如下: var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task("default", function () { return gulp.…

Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安装 全局安装 $ npm install gulp -g 进入项目跟目录,初始化 npm init , 然后安装: $ npm install gulp 安装插件 sass的编译(gulp-ruby-sass) 自动添加css前缀(gulp-autoprefixer) 压缩css(gulp-clea…

Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc 1.Babel 的配置文件是.babelrc,存放在项目的根目录下.使用 Babel 的第一步,就是配置这个文件. 该文件用来设置转码规则和插件,基本格式如下. { "presets": [], "plugins": [] } 2.presets字段设定转码规则,官方…

我们知道浏览器环境下直接运行ES6是存在一些兼容性问题的.那么把ES6变成ES5不就行了吗? 那如何将ES6转换成ES5呢?我们来搭建它的转换环境吧~ 第一步:初始化项目,建立写注意事项的README.md文件,初始化package.json文件. 第二步:创建index.html文件,创建src文件夹放js文件,dist文件夹放编译之后的js文件(这个也是html文件要引入的js文件). 记得要修改package.json文件. 第三步:安装es2015preset,创建.babelrc文件,…

   什么是less? 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行(可以在node中进行编译). 使用方法: 1. 在页面中可以直接引入less文件,但是必须引入less.js对其进行客户端编译.一般在练习的时候可以这样引入,在开发中就不要使用这样的方式了,因为在客户端进行编译会大量的浪费性能,…

1.首先创建一个新的文件夹(名为do);2.然后再根目录下面新建一个package.json,只需要写明两个属性即name和version,这个没有必须要和下面我写的一致,可以自行定义. { "name":"test-project", "version":"1.0.0" } 3.此时打开webstorm的终端(Terminal),快捷键为Alt+F12,安装babel-cli. npm install --save-dev…

项目简介:该项目是基于日常计算宿舍水电煤气费的需求写的,旨在从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发,使用webpack进行代码的编译.压缩和打包,并疏通了该项目如何放到服务器上运行的全过程. 项目环境搭建一.vue的安装和使用1.安装node2.全局安装vue-cli,用npm install -g vue-cli命令3.用webpack初始化项目,在需要放置项目的路径下用vue init webpack BillingSystem(项目名)命令…

接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置淘宝镜像请参考上篇进行安装,地址:https://www.cnblogs.com/puyongsong/p/12036090.html 一.新建项目,目录如下 二.执行命令初始化项目 cnpm init -y 执行成功后会生成文件:package.json 三.执行命令安装webpack cnpm…