gulp学习笔记

Posted 2020-08-20 510blog

第一步：安装Node

　　首先，gulp 是基于 Nodejs 的自动任务运行器，所以安装gulp之前，最基本也最重要的是，我们需要搭建node环境。访问http://nodejs.org，下载并安装Nodejs ，就一切准备就绪。npm会随着安装包一起安装，稍后会用到它。

　　为了确保Node已经正确安装，我们执行几个简单的命令：node -v 和 npm -v  来查看一下Nodejs 和 npm的版本号。如果这两行命令没有得到返回，可能node就没有安装正确。

第二步：安装gulp

　　安装gulp 分两步：

　　一、首先是全局安装　　

　　在命令行中输入 npm install -g gulp 

　　安装完成后，你可以使用命令gulp -v 查看gulp的版本号以确保gulp已经被正确安装。

　　二、将gulp安装到项目本地.

　　使用cd命令进入到项目目录，并在项目目录中创建package.json

 

{
  "name": "name_you_want",
  "version": "0.0.1",
  "devDependencies": { }
}

 

　　运行命令 npm install --save-dev gulp 将gulp安装到项目本地。这里，我们使用—-save-dev来更新package.json文件，更新DevDependencies值，以表明项目需要依赖gulp。Dependencies可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系。

第三步：新建Gulpfile文件，运行gulp

 

var gulp = require(‘gulp‘); 

安装常用的gulp插件

npm install --save gulp
npm install --save gulp-load-plugins

npm install --save gulp-concat
npm install --save gulp-rename

npm install --save-dev jshint gulp-jshint
npm install --save gulp-less
npm install --save gulp-sass

npm install --save gulp-uglify
npm install --save gulp-minify-css
npm install --save gulp-minify-html
npm install --save gulp-imagemin
npm install --save gulp-htmlmin

npm install --save gulp-livereload
npm install --save gulp-connect

npm install --save gulp-plumber
npm install --save gulp-notify