Gulp入门安装及运行gulp

本文介绍 Gulp 构建工具的安装步骤与基本使用方法,包括 Node.js 的安装、Gulp 的全局及本地安装流程、Gulp 插件安装、配置文件 gulpfile.js 的创建及执行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Gulp 是一个自动化工具 - 通常称构建工具
附件含有gulpfile.js

微笑 微笑 微笑
安装流程:
注意:下面安装环境都是在命令提示符;window -> 运行 -> cmd
            -g:全局安装;
            --save:将保存配置信息至package.json;
           -dev : 保存至package.json的devDependencies节点 ;

一、安装nodejs
        安装:nodejs官网绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后傻瓜式安装。
        查看是否安装成功: 命令提示符输入->  node -v 与 npm -v( npm是在安装nodejs同 安装的nodejs包管理器

二、全局安装Gulp
         安装:命令提示符执行npm install gulp -g 
         查看是否安装成功: 命令提示符输入-> gulp -v  

三、新建package.json文件
       1.创建一个名称为test项目;
    
  1. cd F
  2. mkdir test
  3. cd test
  4. mkdir dev
  5. cd dev
  6. mkdir test
  7. cd test
  8. mkdir css sass js image
  9. cd.>index.html
  10. cd sass 
  11. cd.> style.scss

        2. 新建 :命令提示符执行npm init 
           name:项目名称 (填写)
           varsion:项目版本 (填写)
           description:项目描述 (填写)

四、本地安装Gulp
         1. 路径转向指定项目文件:  cd D:\test
         2. 安装:命令提示符执行npm install gulp --save-dev 
        查看是否安装成功:项目文件中生成 node_modules 文件
        全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能

五、本地安装Gulp插件
         注意: 
          1. 首先安装-> npm install jshint@2.x  防止红字报错jshint@2.x (其他文件不存在也需要安装)
         2. 径转向指定项目文件:  cd D:\test
        3. 安装:命令提示符执行 npm install  gulp-concat gulp-rename gulp-jshint   gulp-compass   gulp-html-minify   gulp-clean-css   
              gulp-uglify   gulp-imagemin   gulp-tinypng-nokey   gulp-rev   gulp-rev-collector   --save-dev 
               查看是否安装成功:查看package.json;

六、新建gulpfile文件 并 执行 gulp
         参考笔记里面有gulpfile文件CODE;
            路径转向指定项目文件:  cd D:\test
          执行Gulp: 令提示符执行 all  、default  、 gulp  -> 分别为运行对应的任务(gulpfile.js的为例)
       
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值