gulp安装和使用

gulp介绍

gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务:
搭建web服务器
文件保存时自动重载浏览器
使用预处理器如Sass、LESS
优化资源,比如压缩CSS、JavaScript、压缩图片
类似Gulp的工具,我们通常称之为构建工具或者叫自动化构建工具。

npm常用命令
npm -v:查看npm安装的版本。
npm init:会引导你创建一个package.json文件,包括名称、版本、作者等信息。
npm list:查看当前目录下已安装的node包。
npm ls:查看当前目录下已安装的node包。
npm install moduleNames:安装Node模块到本地目录node_modules下。
npm install <name> -g:将包安装到全局环境中。
npm install <name> --save:安装的同时,将信息写入package.json中
项目路径中如果有package.json文件时,直接使用npm install方法就可以根据dependencies配置安装所有的依赖包,这样代码提交到git时,就不用提交node_modules这个文件夹了。
npm install <name> --save-dev:安装的同时,将信息写入package.json中项目路径中如果有package.json文件时,直接使用npm install方法就可以根据devDependencies配置安装所有的依赖包,这样代码提交到git时,就不用提交node_modules这个文件夹了。
npm uninstall moudleName:卸载node模块。
gulp安装

项目中使用gulp 先创建一个文件夹gulptest作为项目的跟目录
在根目录下执行 npm init 命令, npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息。比如你用到的各种依赖(这里主要是插件)

安装 gulp

npm install gulp -g  将包安装到全局环境中(全局安装命令行中可以使用gulp命令)。简写(npm i gulp -g)(全局安装)
npm install gulp --save-dev  安装到本地目录,同时将安装信息写入package.json中,简写(npm i gulp -D)(局部安装)

检查 node、npm和npx 是否正确安装

node --version
npm --version
npx --version

创建项目目录并进入

npx mkdirp my-project
cd my-project

在项目目录下创建 package.json 文件

npm init

上述命令将指引你设置项目名、版本、描述信息等。

安装 gulp,作为开发时依赖项

npm install --save-dev gulp

检查 gulp 版本

gulp --version

创建 gulpfile 文件
利用任何文本编辑器在项目大的根目录下创建一个名为 gulpfile.js 的文件,并在文件中输入以下内容:

function defaultTask(cb) {
  // place code for your default task here
  cb();
}
exports.default = defaultTask

测试
在项目根目录下执行 gulp 命令:

gulp

如需运行多个任务(task),可以执行 gulp 。

你可能感兴趣的:(gulp)