安装后使用 node -v 查看版本
node 安装完之后会顺带安装 npm
ps:npm 其实是 Node.js 的包管理工具 (package manager) 为啥我们需要一个包管理工具呢? 因为我们在 Node.js 上开发时, 会用到很多别人写的 JavaScript 代码. 如果我们要使用别人写的某个包, 每次都根据名称搜索一下官方网站, 下载代码, 解压, 再使用, 非常繁琐. 于是一个集中管理的工具应运而生: 大家都把自己开发的模块打包后放到 npm 官网上, 如果要使用, 直接通过 npm 安装就可以直接用, 不用管代码存在哪, 应该从哪下载. 更重要的是, 如果我们要使用模块 A, 而模块 A 又依赖于模块 B, 模块 B 又依赖于模块 X 和模块 Y,npm 可以根据依赖关系, 把所有依赖的包都下载下来并管理起来.
同样用 npm -v 查看版本
2, 安装 gulp 插件: npm install -g gulp
3, 本地创建一个项目文件并用 gulp 管理
1 > 在 D 盘创建要给空文件夹 Gulp_Test .Win+R 打开命令窗口并定位到当前项目目录, 然后输入指令: npm init 回车(有 git 的童鞋在文件夹里直接右键 git bash here 也可), 命令执行期间会提示输入一些关于项目的描述信息, 非必填一路回车即可.
完成之后文件夹中会生成一个 package.json 文件.
2 > 执行以下命令
- // 本地安装: npm install gulp --save-dev (gulp 插件)
- // 本地安装: npm install gulp-concat --save-dev (合并插件)
- // 本地安装: npm install gulp-uglify --save-dev (压缩插件)
至此, 所有准备工作已就绪, 开始管理我们的项目吧.
(1)在项目根目录创建一个名为 gulpfile.js 的 js 文件
(2)在根目录新建 js 文件夹, 并在文件夹中新建两个 js 文件, 代码如下:
index.js:
- var index={};
- index={
- test:function(argument){
- console.log('test');
- }
- }
- index.test();
- View Code
- main.js:
- var main = {};
- main.test=function(argument){
- console.log("main test");
- }
- main.test();
- View Code
(3)在根目录创建 build 文件夹, 用来存放打包后的文件
(4)编辑第 (1) 步创建的 gulpfile.js 文件, 内容如下:
- var fs = require('fs');
- var gulp = require('gulp');//gulp 自身
- var uglify= require('gulp-uglify');// 引入压缩组件
- var concat = require('gulp-concat');// 引入合并组建
- gulp.task('taskName', function() {
- // 找到 src 目录下的所有文件夹中的所有 js 文件
- return gulp.src('js/*.js')
- .pipe(uglify())// 压缩
- .pipe(concat('all.min.js'))// 输入到 all.min.js 中
- .pipe(gulp.dest('./build'))// 指定目录
- .on('end', callback);// 结束事件回调
- });
- // 检查文件体积
- function callback() {
- var path = "./build/all.min.js";
- var exists = fs.existsSync(path);
- if (!exists) {
- return;
- }
- var states = fs.statSync(path);
- console.log("file size:" + Math.ceil(states.size / 1024) + "kb");
- }
- View Code
PS:taskName 为变量, 任务名. 可以定义多个 task, 并根据 glup+taskName 执行不同的 task
(5)执行 gulp 命令 :gulp taskName
(6)执行成功之后检查 build 文件是否有 all.min.js 生成
来源: https://www.cnblogs.com/surfing/p/9214564.html