gulp的简单使用

2017-03-17 本文已影响0人 liuwan

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

安装nodejs：gulp是基于nodejs，打开node官网下载安装。
使用命令行：node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；

npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器。
cd定位到目录，用法：cd + 路径；
dir列出文件列表；
cls清空命令提示符窗口内容。
全局安装gulp
2.1安装：命令提示符执行npm install gulp -g；
2.2查看版本：命令提示符执行gulp -v，出现版本号即为正确安装。
新建package.json
3.1、说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
3.2、它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）

  1. {
  2.   "name": "test",   //项目名称（必须）
  3.   "version": "1.0.0",   //项目版本（必须）
  4.   "description": "This is for study gulp project !",   //项目描述（必须）
  5.   "homepage": "",   //项目主页
  6.   "repository": {    //项目资源库
  7.     "type": "git",
  8.     "url": "https://git.oschina.net/xxxx"
  9.   },
  10.   "author": {    //项目作者信息
  11.     "name": "liuwj",
  12.     "email": "281862271@qq.com"
  13.   },
  14.   "license": "ISC",    //项目许可协议
  15.   "devDependencies": {    //项目依赖的插件
  16.     "gulp": "^3.8.11",
  17.     "gulp-less": "^3.0.0"
  18.   }
  19. }

3.3、我们应该使用更为效率的方法：命令提示符执行npm init
查看package.json帮助文档，命令提示符执行npm help package.json

来源网络

本地安装gulp插件
4.1、安装：定位目录命令后提示符执行npm install --save-dev；
4.2、本示例以gulp-less为例（编译less文件），命令提示符执行npm install gulp-less --save-dev；
4.3、本地安装gulp：npm install gulp --save-dev；
新建gulpfile.js文件*
5.1、说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。
5.2、它大概是下面这样一个js文件

  1. /*
  2. ** 创建人：Liuwj
  3. ** 创建日期：2016年12月12日17:43:40
  4. ** 功能介绍：gulp工具的安装、常用插件、基础用法
  5.  */
  6. // 定义gulp gulp-uglify gulp-concat 等插件
  7. // 导入工具包 require('node_modules里对应模块')
  8. var gulp = require("gulp");             //gulp 基础库
  9. var uglify = require("gulp-uglify");    //压缩js
  10. var concat = require("gulp-concat");    //合并文件
  11. // 所有要压缩的文件路径
  12. var paths = {
  13.     scripts:['js/index.js','js/main.js']
  14. };
  15. var date = new Date().getTime()/1000;
  16. /*
  17. ** ①gulp.task: 定义要实现的任务
  18. ** "testGulp": 自定义任务名称，不能加空格
  19. ** ②gulp.src: 获取流
  20. ** ③gulp.dest: 用来写文件
  21. ** ④gulp.watch: 例如：gulp.watch('js\/**\/*.js', ['uglify','reload']);
  22.  */
  23. gulp.task("testInfo",function(){
  24.     console.log(Math.round(date));
  25.     console.log('this is a testGulp');
  26. });
  27. gulp.task("testGulp", function(){
  28.     gulp.src(paths.scripts)             //该任务针对的文件
  29.         .pipe(uglify())                 //先压缩输出
  30.         .pipe(concat("all.min.js"))     //合并到all.min.js
  31.         .pipe(gulp.dest("build"));
  32. });
  33. gulp.task("default",["testGulp"]);      //定义默认任务
  34. /*
  35. ** 常用插件：
  36. *  安装：npm install <name> [-g] [--save-dev]
  37. *  卸载：npm uninstall <name> [-g] [--save-dev]
  38. *  gulp-uglify: js文件压缩
  39. *  gulp-rename: 重命名文件
  40. *  gulp-minify-css: 压缩css文件
  41. *  gulp-minify-html: html文件压缩
  42. *  gulp-concat: 文件合并
  43. *  browser-sync: 自动刷新
  44.  */

运行gulp
6.1、说明：命令提示符执行gulp 任务名称；
6.2、编译less：命令提示符执行gulp testLess；
6.3、当执行gulp default或gulp将会调用default任务里的所有任务[‘testGulp’,’elseTask’]。
使用webstorm运行gulp任务
7.1、说明：使用webstorm可视化运行gulp任务；
7.2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口，若出现”No task found”，选择右键”Reload tasks”，双击运行即可。

webstorm截屏
总结
8.1、安装nodejs；
8.2、新建package.json文件；
8.3、全局和本地安装gulp；
8.4、安装gulp插件；
8.5、新建gulpfile.js文件；
8.6、通过命令提示符运行gulp任务。

gulp的简单使用

猜你喜欢

热点阅读