gulp
一、在node环境下配置gulp
命令 | 解释 |
---|---|
npm install gulp -g | 全局安装gulp |
npm install –global gulp | 全局安装gulp |
npm install gulp –save-dev | 本地安装gulp插件 |
npm install –save-dev gulp | 本地安装gulp插件 |
npm install <name> [-g] [--save-dev]
<name>
:node插件名称。例:npm install gulp-less --save-dev
-g
:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm
,并且写入系统环境变量; 非全局安装:将会安装在当前定位目录; 全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()
调用;--save
:将保存配置信息至package.json
(package.json是nodejs项目配置文件);-dev
:保存至package.json
的devDependencies
节点,不指定-dev将保存至dependencies
节点;一般保存在dependencies
的像这些express/ejs/body-parser
等等
注意:通过全局安装gulp
插件,直接通过require()
的方式是没有办法调用全局安装的gulp
插件的。全局的安装是供命令行使用的,就好像全局安装了gulp
后,就可以在命令行中直接运行gulp
命令
全局安装gulp
是为了执行gulp
任务,本地安装gulp
则是为了调用gulp
插件的功能。这里一定要注意区分全局安装和本地依赖安装
二、npm命令
命令 | 解释 |
---|---|
npm uninstall [-g] [–save-dev] | 使用npm卸载插件(不要直接删除本地插件包) |
npm uninstall gulp-less gulp-uglify gulp-concat | 删除全部插件 |
npm update [-g] [–save-dev] | 使用npm更新插件 |
npm update [–save-dev] | 更新全部插件 |
npm root | 查看当前包的安装路径 |
npm remove | 移除 |
npm root -g | 查看全局模块的安装目录 |
npm help | 查看npm帮助 |
npm list | 当前目录已安装插件 |
借助rimraf:npm install rimraf -g
用法:rimraf node_modules
常用的npm命令列表看这里常用的npm命令列表
三、使用淘宝镜像
cnpm(http://npm.taobao.org)
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装完后最好查看其版本号cnpm -v
或关闭命令提示符重新打开,安装完直接使用有可能会出现错误
四、如何新建一个gulp任务
- 一、 全局安装 gulp
$ npm install --global gulp
- 二、
CMD
进入到当前文件夹 - 三、
npm
初始化执行命令npm init
会创建一个json
文件 - 四、本地安装,安装依赖
npm install gulp --save-dev
(或npm install --save-dev gulp
) - 五、 在项目根目录下创建一个名为
gulpfile.js
的文件 - 六、使用
gulp
,仅需知道4个API即可:gulp.task()
,gulp.src()
,gulp.dest()
,gulp.watch()
,gulp.pipe()
五、一些常用的gulp插件
插件 | 作用 |
---|---|
gulp-uglify-js | js压缩 |
gulp-concat-js | js合并 |
gulp-less | 转义lee为css |
gulp-sass | 转义sass为css |
gulp-autoprefixer | 自动添加css前缀 |
gulp-clean-css | 压缩css |
gulp-minify-css | 压缩css |
gulp-jshint | js代码校验 |
gulp-imagemin | 压缩图片 |
gulp-livereload | 自动刷新页面,谷歌浏览器需安装livereload插件 |
browser-sync | 自动刷新页面 |
gulp-rename | 重命名 |
gulp-cache | 图片缓存,只有图片替换了才压缩 |
gulp-notify | 更改提醒 |
gulp-rect | 转换jsx为普通js文件 |
gulp-babel | ES6转义成ES5 |
gulp–preset-es2015 | ES6转义成ES5,不需要显示调用 |
browserify | 模块化插件 |
gulp-browserify | 模块化插件 |
gulp-jasmine | 暂无 |
gulp-mocha | 暂无 |