gulp安装教程

此教程适合纯小白,大神请自飞。

目的:带你飞进前端自动化的世界,碾压传统开发方式

首先你要记住:整个过程so easy!
开撸:

第一步:安装Node

  • 下载Node
    gulp是基于Node环境的,所以我们需要去 Node官网 下载Node(中间那个大大的绿色 install 按钮),来搭建Node环境。

  • 安装Node
    Node的安装非常简单,一路Next到底;

  • 检测Node
    为了确保Node已经正确安装,我们需要执行以下几步:

  1. 我们打开开始菜单,点击所有程序,找到Node.js文件夹内的Node.js程序,然后运行它(当然你也可以使用windows自带的命令行工具cmd)。
  2. 在命令行内输入如下命令
1
node -v		//然后回车(enter)

如果安装正确你会看到你所安装的Node的版本号;

  • 检测npm
    首先说下npm,npm是基于命令行的node包管理工具,它可以将node的程序模块安装到项目中,在它的 官网 中可以查看和搜索所有可用的程序模块。我们刚才在安装Node的时候已经安装过npm了,接下来我们要做的只是检测是否安装正确(这一步个人觉得完全没必要,但是我是写给纯小白的,还是顺带说下吧。)

在命令行内输入如下命令

1
npm -v		//然后回车(enter)

同上得到版本号为安装正确;

按照以上步骤若没得到版本号,请自行卸载Node,重新安装;

第二步:安装gulp

首先自建一个文件夹,比如在D盘新建一个叫test的文件夹;然后:

  • 在命令行中定位到你所建的文件夹;命令如下
1
2
D:		//回车(enter)
cd test //回车(enter)

这样就定位到test文件夹内了

  • 然后开始安装gulp啦,继续在刚才的命令行内输入如下代码(也可以新建命令行,因为这是全局安装,命令行的文件夹定位并不能决定它的安装位置)
1
npm install gulp -g
  1. -g 表示全局安装,方便任何项目都能够使用它
  2. install是npm执行的安装命令
  • 检测gulp是否安装正确
1
gulp -v

若看到版本号,表示安装成功;若没有重装咯。

  • 接下来在本地项目中(也就是刚才新建的test文件夹内)安装gulp;
1
npm install gulp —-save-dev

—-save-dev是用来表明项目依赖于gulp;

这时我们发现test文件夹内已经多了一个名为node_modules的文件夹;这表明安装成功了。

第三步:生成package.json文件

1
npm init

然后一路回车(enter),这是你发现test文件夹内已经多了一个名为package.json的文件;这个文件内的devDependencies是空白的,这里我们先记下等会要用上

第四步:安装gulp插件

到目前为止我们的gulp已经安装完成,下面我们说下gulp插件,告诉大家如何在项目中运用这些插件;

  • 比较长用的插件有:
  1. gulp-htmlmin //压缩html
  2. gulp-minify-css //压缩css
  3. gulp-uglify //压缩js
  4. gulp-jshint //检测js
  5. gulp-rename //重命名
  6. gulp-concat //合并文件
  • 安装这些插件:
1
npm install gulp-htmlmin gulp-minify-css gulp-uglify gulp-jshint gulp-jshint gulp-rename gulp-concat --save-dev

然后回车(enter),这时打开test/node_modules文件夹,你会发现这些插件都已经在里面啦,打开package.json文件,找到devDependencies,里面已经生成好了插件的名称以及版本号;这得力于–save-dev;

第五步:配置gulpfile.js文件

在项目根目录(test文件夹)建立gulpfile.js文件

配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 引入 gulp及组件
var gulp = require('gulp'), //基础库
htmlmin = require('gulp-htmlmin'), //压缩html
minifycss = require('gulp-minify-css'), //压缩css
uglify = require('gulp-uglify'), //压缩js
jshint = require('gulp-jshint'), //检查js
rename = require('gulp-rename'), //重命名
concat = require('gulp-concat'), //合并文件

// 压缩html
gulp.task('htmlmin', function() {
gulp.src('src/*.html') //压缩的文件
.pipe(gulp.dest('minified/html')) //输出文件夹
.pipe(htmlmin()); //执行压缩
});

// 压缩css
gulp.task('minifycss', function() {
gulp.src('src/*.css') //压缩的文件
.pipe(gulp.dest('minified/css')) //输出文件夹
.pipe(minifycss()); //执行压缩
});

// js处理
gulp.task('minifyjs', function() {
gulp.src('src/*.js')
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest('minified/js')) //输出main.js到文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('minified/js')); //输出
});

//执行压缩前,先删除文件夹里的内容
gulp.task('clean', function(cb) {
del(['minified/css', 'minified/js'], cb)
});

//默认命令,在命令行中输入gulp后,执行的就是这个命令
gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});

// 默认任务
gulp.task('default', function(){
gulp.run('htmlmin', 'minifycss', 'minifyjs');

// 监听文件变化 运行语句 gulp watch
gulp.watch('minified/js/*.js', function(){
gulp.run('htmlmin', 'minifycss', 'minifyjs');
});
});