正文

gulp学习笔记

510blog  510blog  2022-08-14  747

关键词：

第一步：安装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

gulp学习笔记1uglify

作用：MinifyJavaScriptvargulp=require(‘gulp‘)varuglify=require(‘gulp-uglify‘)gulp.task(‘default‘,function(){gulp.src(‘app/js/*.js‘).pipe(uglify()).pipe(gulp.dest(‘app/minjs‘))}) 查看详情

npm和gulp学习笔记

原文链接：【gulpfile.js文件常见配置】查看详情

gulp学习笔记

参考：http://www.cnblogs.com/tugenhua0707/p/4069769.htmlGulp实现web服务器阅读目录一：gulp实现web服务器配置：二：添加实时刷新（livereload）支持回到顶部一：gulp实现web服务器配置：对于前端开发而言，需要在本地搭建一个服... 查看详情

gulp学习笔记1

1、安装gulp首先我们需要node环境，nodejs安装这里就不说了，不懂的可以自己百度。在命令行输入npminstall-ggulp安装完成后可在命令行输入`gulp-v`以确认安装成功。 2、压缩js压缩js代码可降低js文件大小，提高页面打开速度... 查看详情

gulp学习笔记

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

gulp学习笔记

gulp 是基于 Nodejs 的自动任务运行器，能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实... 查看详情

gulp学习笔记2

1、压缩CSS压缩css代码可降低css文件大小，提高页面打开速度。目标：找到css/目录下的所有css文件，压缩它们，将压缩后的文件存放在dist/css/目录下。在压缩之前，需要安装新的模块，输入以下命令行：npminstallgulp-minify-css在对应... 查看详情

ionic学习笔记三gulp在ionic中的使用

简介Gulp是一个基于流的自动化构建器。安装npmconfigsetregistryhttp://registry.npm.taobao.org---最好用国内源npminstall-ggulpnpminstall--save-devgulp创建文件gulpfile.jsvargulp=require(‘gulp‘);gulp.task(‘default‘,function(){//placeco 查看详情

gulp

之前学习中做的笔记，放在有道云笔记里面了，分享出来，一起学习啦。 gulp入门篇：http://note.youdao.com/noteshare?id=f0fae7bae57c9deaaa10d2b51c431d75gulp进阶篇：http://note.youdao.com/noteshare?id=afcab61d2edfabd5af235c1d6acad154gulp常用插件：h 查看详情

《nodejs+gulp+webpack基础实战篇》课程笔记--实战演练

...可以像写后台模板（譬如PHP）一样写前端页面。我们首先学习一下写法.　　现在我们创建一个新任务:创建一个裸的index.html文件，然后在body里面写上，我的年龄是:<%=age%>　　下载好gulp-template，我们引用并配置vargulp_ 查看详情

《nodejs+gulp+webpack基础实战篇》课程笔记--webpack篇

webpack引入　　前面我们简单学习了gulp，这时一个前端构建框架---webpack产生了（模块打包）它能帮我们把本来需要在服务端运行的JS代码，通过模块的引用和依赖打包成前端可用的静态文件。（这里有需要了解一下CommonJS规范，... 查看详情

vue.js学习笔记九(代码片段)

一、什么是Webpack？webpack是一个现代的Javascript应用的静态模块打包工具二、前端模块化2.1、打包是如何理解呢？就是将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）并且在打包的过程中的过程中&#x... 查看详情

vue.js学习笔记九(代码片段)

gulp使用笔记

gulp环境搭建:npminstallgulp-cli-g//全局安装gulp-cli（用cd命令切换到项目所在的路径，再敲入这行命令）npminit然后一直回车,最后yes(这一步是配置package.json文件,后续可以自己直接配置文件)npminstallgulp-D//局部安装gulp并将安装的版本信... 查看详情

gulp笔记

1、全局安装gulp-cli和gulp2、package.json文件配置，devDevpendencies配置对应 $npminstallmodule_name--save-dev开发环境　devpendencies配置对应$npminstallmodule_name --save 生产环境，可以直接引用加入打包,而不需要再html文件上单独引入依赖... 查看详情

gulp学习。

...入$npminstallgulp安装再输入$gulp--version。创建一个Gulp项目在学习过程中，将一个名为package.json的文件作为根目录，在命令行内运行$npmini 查看详情

gulp入门学习

一、gulp简介 gulp是一个自动化构建工具。在开发过工程中，能够使用gulp对项目进行自动构建，大大提高工作效率。二、安装gulp 在安装gulp之前先要确认已经正确安装了node.js，然后在项目根目录下安装gul... 查看详情

超硬核web前端学霸笔记，学完就去找工作！

文章和教程Vue学习笔记Node学习笔记React学习笔记Angular学习笔记RequireJS学习笔记Webpack学习笔记Gulp学习笔记Python学习笔记Egret引擎学习笔记流处理，TCP和UDP，WebRTC和Blob学习笔记博客前端回忆录|前端笔记本-一个前端博主记录的心得... 查看详情