Gulp安装笔记

前言

总的来说,玩gulp的流程是这样的:

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

说实在的,我并不是很清楚gulp是干什么的,但是每个人都说好,出于好奇心,忍不住就来研究一下,所以,搞清楚这个流程还是很有必要的。

基本安装

安装gulp之前我们需要安装nodejs的环境,检测能够正常使用npm后,我们用npm对gulp进行一次全局安装

npm install gulp -g

随便在哪个路径下面都可以进行全局安装

安装好了以后我们建立一个test作为项目主路径,然后在cmd里cd到这个路径用npm对gulp进行依赖安装

npm install gulp --save-dev

完事后发现项目路径下多了一个文件夹

说明安装成功了

忍不住点进去会发现有一个package.json ,目前我暂时还不知道是干嘛的,只不过看网上很多人说这玩意儿很有用,先看看长什么样子总是好的。

插件安装

要使用gulp就必须使用gulp的插件,以下是我在网上搜索到的gulp插件:

sass的编译(gulp-ruby-sass)

自动添加css前缀(gulp-autoprefixer)

压缩css(gulp-minify-css)

js代码校验(gulp-jshint)

合并js文件(gulp-concat)

压缩js代码(gulp-uglify)

压缩图片(gulp-imagemin)

自动刷新页面(gulp-livereload)

图片缓存,只有图片替换了才压缩(gulp-cache)

更改提醒(gulp-notify)

清除文件(del)

至于怎么安装嘛,还是要靠npm,可以一次性安装多个,module name可以无限累加。

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

路径还是在项目路径下

安装完成后会发现在项目下的gulp文件夹多出了许多插件的文件夹

加载插件

插件安装完成了以后就需要使用,使用之前必须先加载,我们使用require的方法来加载。

在此之前我们先要在项目的根路径下建立一个名为gulpfile.js的文件,别问我为什么,我也不知道。

然后我们可以在里面写入我们引用插件的代码,最简单的代码如下:

var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() {
  // 将你的默认的任务代码放在这
});

我们把我们刚才安装的插件全都加载进来

var gulp = require(‘gulp‘),
    sass = require(‘gulp-ruby-sass‘),
    autoprefixer = require(‘gulp-autoprefixer‘),
    minifycss = require(‘gulp-minify-css‘),
    jshint = require(‘gulp-jshint‘),
    uglify = require(‘gulp-uglify‘),
    imagemin = require(‘gulp-imagemin‘),
    rename = require(‘gulp-rename‘),
    concat = require(‘gulp-concat‘),
    notify = require(‘gulp-notify‘),
    cache = require(‘gulp-cache‘),
    livereload = require(‘gulp-livereload‘),
    del = require(‘del‘);

然后我们在cmd里输入gulp命令,结果如下

这个名为default的task没有做任何事情,具体要做一些压缩之类的操作还得查阅更多的API。

如果想单独执行一个task,就直接输入"gulp <task name>",比如我们想单独执行default这个task就可以这样

gulp default

到这里,我们的gulp环境就部署好了。

附:gulp插件github地址或API地址

sass的编译(gulp-ruby-sass) https://github.com/sindresorhus/gulp-ruby-sass

自动添加css前缀(gulp-autoprefixer) https://github.com/Metrime/gulp-autoprefixer

压缩css(gulp-minify-css) https://github.com/murphydanger/gulp-minify-css

js代码校验(gulp-jshint) https://github.com/spalger/gulp-jshint

合并js文件(gulp-concat) https://github.com/contra/gulp-concat

压缩js代码(gulp-uglify) https://github.com/terinjokes/gulp-uglify

压缩图片(gulp-imagemin) https://github.com/sindresorhus/gulp-imagemin

自动刷新页面(gulp-livereload) https://github.com/vohof/gulp-livereload

图片缓存,只有图片替换了才压缩(gulp-cache) https://github.com/jgable/gulp-cache

更改提醒(gulp-notify) https://github.com/mikaelbr/gulp-notify

清除文件(del) https://www.npmjs.com/package/del

参考文章:

http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/

时间: 2024-08-26 17:45:13

Gulp安装笔记的相关文章

docker在ubuntu14.04下的安装笔记

本文主要是参考官网教程进行ubuntu14.04的安装. 下面是我的安装笔记. 笔记原件完整下载: 链接: https://pan.baidu.com/s/1c1CZZCs 密码: qk1x

Python MySQLdb Linux下安装笔记

本文介绍了Python MySQLdb Linux下安装笔记,本文分别讲解了快速安装和手动编译安装两种方法,并分别讲解了操作步骤,需要的朋友可以参考下 主要针对centos6.5 64位系统 默认python版本为2.6 编码安装python2.7和python3.4      一.yum快速安装 yum install MySQL-python yum install python-setuptools 经常接触Python的同学可能会注意到,当需要安装第三方python包时,可能会用到eas

windows2008r2安装笔记

安装win7主题 控制面板 - 程序 - 打开或关闭windows功能 - 功能 - 添加功能: 在选择功能里勾选 桌面体验(会添加必要功能),安装就行了. 1.安装好后,个性化时,发现win7主题为灰色不可选,检查是否启动Themes服务,在开始 - 运行 services.msc,开启 Themes 服务,并设置为自动启动(不用重启电脑),win7主题就可以用了. 喇叭不可用,有一个小红叉 先确认已经安装了声卡驱动.在开始 - 运行 services.msc,开启 Windows Audio

PHP7安装笔记

PHP7安装笔记 时间 2015-03-03 13:03:46 喵了个咪 原文 http://www.hdj.me/php7-install-note 主题 PHP # 安装mcrypt yum install -y php-mcrypt libmcrypt libmcrypt-devel # 升级bison cd /var/soft/ wget http://ftp.gnu.org/gnu/bison/bison-2.6.4.tar.gz tar -xvzf bison-2.6.4.tar.g

Gulp安装及配合组件构建前端开发一体化

所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev # 局部安装 全局安装 1. 将安装包放在

laravel安装笔记 (转)

一.安装composer 安装之前将\php\php.ini文件中的php_openssl.dll扩展库开启,否则composer在安装过程中会出现错误提示. (我在安装过程中发现apache目录下的php.ini最好也开启php_openssl.dll,就是讲前面的‘:’号去掉) composer下载地址:https://getcomposer.org/ windows下载地址:https://getcomposer.org/Composer-Setup.exe 二.下载Laravel最新框架

Percona Server 的安装及tokudb引擎的安装笔记

Percona Server 的安装及tokudb引擎的安装笔记 2017年7月7日 安装percona server: yum localinstall Percona-Server-client-57-5.7.18-15.1.el6.x86_64.rpm  Percona-Server-shared-57-5.7.18-15.1.el6.x86_64.rpm Percona-Server-server-57-5.7.18-15.1.el6.x86_64.rpm  Percona-Server

gulp学习笔记

第一步:安装Node 首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,下载并安装Nodejs ,就一切准备就绪.npm会随着安装包一起安装,稍后会用到它. 为了确保Node已经正确安装,我们执行几个简单的命令:node -v 和 npm -v  来查看一下Nodejs 和 npm的版本号.如果这两行命令没有得到返回,可能node就没有安装正确. 第二步:安装gulp 安装gulp

ArchLinux 安装笔记:续 --zz

续前话 在虚拟机里调试了几天,终于鼓起勇气往实体机安装了,到桌面环境为止的安装过程可以看我的前一篇文章<ArchLinux 安装笔记>.桌面环境我使用的是 GNOME,虽然用了很长一段时间的 KDE,但是 KDE5 神一般的开机速度简直让人喜感,最后还是选择了 GNOME- 安装 GNOME 桌面环境 安装 Xorg 本来以为需要安装整个 Xorg 事实上根本不用- pacman -S xorg-xinit xorg-server xorg-twm xterm 安装 GNOME pacman