前端构建工具gulp


前段时间做一个项目,试着用gulp来构建前端代码。今天简单总结了一下:一:安装gulp环境  1. 安装node    在node官方文档下载匹配的版本 我下载的是如下图的版本。http://nodejs.cn/download/      下载好以后, 可以一直点击下一步,进行默认安装    安装好以后,在控制台输入cmd,打开命令提示符,输入node -v 查看node是否安装成功以及node的版本。    2.全局安装gulp    在命令提示符中时输入 npm install gulp -g    二:项目流程  1.生成项目所需的package.json文件    比如:我的本地项目放在D:maxiaodanprojectwebapp这个目录下,找到这个目录,在地址栏输入cmd,或者通过cd命令,进入项目的目录。    输入npm init ,一直按enter键,自动生成package.json文件(一个node package有2中依赖,一种是dependencies:依赖的项是正常运行该包时所需要的依赖项。一种是devDependencies:开发时需要的依赖项,像一些单元测试之类的包。如果只是单纯的使用这个包而不需要进行一些改动测试之类的,可以只安装dependencies)        生成的package.json文件如下图所示:      2.项目根目录下安装gulp    只安装dependencies npm install gulp –save    安装devDependencies npm install gulp免费云主机域名 –save-dev    执行命令npm install gulp –save 安装gulp ,完成后 会在项目根目录下生成一个node_modules的文件夹  3.安装项目所需要的插件    npm install del –save 删除文件    npm install gulp-jshint –save js代码检查插件    npm install gulp-concat –save 合并代码    npm install gulp-util –save 最基础的工具    npm install gulp-sequence –save 控制多个任务进行顺序执行或并行执行。    安装的过程中,可能会遇到这样的提示        我们可以重新进行安装,将这个插件安装位1.0+的版本    执行命令npm install gulp-jshint@1.* –save  4.配置项目的gulpfile.js文件    在项目的根目录下新建一下gulpfile.js文件            配置好以后,命令提示中执行gulp,即输入gulp        会出现如上图的结果,是不正确的    重新安装del插件,版本安装为1.0+的 ,再次执行gulp,就会显示成功        执行完gulp以后,你会发现,在你的项目目录下,会自动生成一个dist的文件夹,里面有一个index.js的文件            我们在项目下面新建一个文件夹,存放js文件       需要注意的是:在html中,只需要引入dist文件夹中的index.js即可。   每当你修改完js文件以后,在控制台输入gulp进行打包,gulp都会把atae文件夹里面所有的.js文件全都打包到dist文件夹中的index.js文件中。所以你的html文件只需要引入index.js文件即可。   每修改一次,就要自己手动编译一次,太过于麻烦了。我们可以稍微改动一下gulpfile.js文件,监听js文件的变化,只要有js文件有改动,自动进行编译,而不需要用户手动去编译。        再次执行gulp,会发现控制台的鼠标光标,一直停留在最后        每当js文件有改动的时候,控制台都会自动进行编译。同时,如果js文件有错误的话,控制台会实时的提供错误的信息,并且dist文件内的index.js文件不会生成    另:如果觉得index.js这个文件名不好的话,可以自己进行修改,同时修改package.json文件夹中的index.js和gulpfile.js文件夹中index.js即可

相关推荐: Sangfor_NGAF学习笔记1

传统防火墙与NGAF(下一代防火墙)的区别传统防火墙基于包头过滤,无法识别应用及其内容,也无法分辨用户行为,无法满足日渐复杂的网络环境,所以才会提出下一代防火墙的概念。下一代防火墙的基本功能:基本防火墙功能,***防御,可视化应用识别,智能防火墙,高性能。Sa…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/26 11:31
下一篇 01/26 11:31