美文网首页实用前端前端杂货铺dotNET
gulp自动化构建项目(一)——环境搭建

gulp自动化构建项目(一)——环境搭建

作者: 墨鸿 | 来源:发表于2016-09-15 16:18 被阅读1029次
    从无聊的重复性过程中解放出来,干点有意义的事。。。

    gulp是前端开发项目构建构建工具,在开发过程中使用gulp可以避免重复的机械劳动,大大提高开发效率,比如:文件合并,文件拷贝,less编译,css压缩, js压缩,图片压缩等。

    gulp官方网站:gulpjs.com

    gulp中文网站:www.gulpjs.com.cn

    gulp基于node.js,需要配置node环境。

    安装node.js

    node.js官网下载最新版node安装包,由于安装包格式为msi,一路确定即可,安装程序会自动配置环境变量。

    安装完成在控制台输入指令node -v检测是否安装成功,若出现版本号表示安装已安装成功。

    npm

    npm是node.js的包依赖管理工具,类似于java中的maven,前端页面依赖包一般也用bower

    开发者为node.js开发了大量工具包,在npm官网可查看具体包信息,按照说明下载使用。由于官网访问速度慢,用淘宝npm镜像也可,与官网每十分钟同步一次,基本保持一致。

    安装node过程中已经自动安装了npm,默认位置为:C:\Program Files\nodejs\node_modules\npm

    配置npm的环境变量,通过命令npm -v查看npm是否安装成功

    初始化项目文件

    接下来我们在E盘根目录创建myweb文件夹,表示项目。进入myweb项目文件夹,在控制台输入npm init初始化,创建package.json配置文件。一路回车即可,直至项目根目录生成package.json文件,表示初始化完成。package.json文件为本项目配置文件。

    安装gulp

    在控制台输入npm install gulp --save-dev安装项目开发依赖包gulp,--save表示写入配置文件即package.json文件中,-dev表示只在开发阶段依赖。安装完成后项目根目录出现node_modules文件夹。

    控制台输入gulp -v检查是否安装成功。出现版本号表示安装成功。

    查看package.json文件,多了以下信息:

    1 "devDependencies": {

    2 "gulp":"^3.9.1"

    3 }

    此时在项目根目录新建文件gulpfile.js,注意文件名为固定,不能随意修改。此时项目根目录的情况是这样的:

    到此,基础环境已搭建完成。

    相关文章

      网友评论

        本文标题:gulp自动化构建项目(一)——环境搭建

        本文链接:https://www.haomeiwen.com/subject/jdybettx.html