gulp学习笔记

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

时间: 2024-10-02 19:36:07

gulp学习笔记的相关文章

gulp 学习笔记

关于学习gulp,推荐大家看前端构建工具gulpjs的使用介绍及技巧,这篇文章就挺全面. 1.gulp的安装 gulp是基于nodejs开发的,所以首先确定安装了nodejs. (1)全局安装gulp npm install -g gulp (2)针对项目局部安装gulp npm install gulp (3)在项目目录下安装gulp依赖包 npm install --save-dev gulp 或者在项目目录下安装package.json中配置的所有依赖 npm install { "nam

gulp学习笔记1

1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的可以自己百度.在命令行输入 npm install -g gulp 安装完成后可在命令行输入 `gulp -v` 以确认安装成功. 2.压缩js 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作.但如果js文件比较多时候,手动就比较麻烦,gulp这时候就可以派上用场了. 目标:找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 d

gulp学习笔记2

1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 目标:找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. 在压缩之前,需要安装新的模块,输入以下命令行: npm install gulp-minify-css 在对应目录创建 gulpfile.js 文件并写入如下内容: // 获取 gulp var gulp = require('gulp') // 获取 minify-css 模块(用于压缩 CSS) v

gulp学习笔记(一)

gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上,gulp 借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单. Gulp 安装 安装 gulp 之前,先安装 Node.js,然后全局安装gulp: npm install -g

gulp学习笔记1-定义

1.gulp是前端开发过程中对代码进行构建的自动化工具,可以通过它提供的各种插件实现如:预编译(sass&less).压缩.合并.图片精灵等前端的重复操作 2.基于nodeJS,以js编写插件,依托于npm在线安装,通过配置文件gulpfile.js来引入插件并编排自动化规则. 3.相对于百度的fis,它更开放和自由,相对于grunt,它更高效和简单

gulp学习笔记1 uglify

作用:Minify JavaScript var gulp = require('gulp') var uglify = require('gulp-uglify') gulp.task('default',function () { gulp.src('app/js/*.js') .pipe(uglify()) .pipe(gulp.dest('app/minjs')) }) 原文地址:https://www.cnblogs.com/ybleeho/p/8444610.html

npm和gulp学习笔记

原文链接:[gulpfile.js文件常见配置]

webpack学习笔记一

webpack.gulp.grunt是前端打包功能工具:因为已经学习了gulp,而最近发现webpack很火,于是着手学习webpack.本篇是webpack学习笔记系列的第一篇,欢迎指教. 我是从慕课网以及官网文档相结合的方式学习的,从官方文档学到的第一个知识点是在使用webpack打包过程中,即使没有webpack.config,js这个文件也是可以的. 首先是全局安装webpack,cmd(如果是window系统,在任意位置)执行命令: npm install --g webpack或cn

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal