文章目录
  1. 1. 安装 Node
  2. 2. 创建项目
  3. 3. 安装 Gulp
  4. 4. 创建Gulp配置文件
  5. 5. 设置配置信息
    1. 5.1. 完整配置文件:

安装 Node

nodejs.org 根据系统选择性按照教程安装Node。

创建项目

  • 创建项目文件夹

  • 进入项目文件夹

  • 初始化项目

    使用npm命令:npm init,根据提示完成。

安装 Gulp

进入项目文件夹,使用Node的包管理命令npm进行安装.

  • 全局安装
1
npm install -g gulp
  • 项目依赖中安装
1
npm install --save-dev gulp

创建Gulp配置文件

  • 在项目根目录新建配置文件gulpfile.js

设置配置信息

以常见的Gulp插件为例,如下:

  1. js代码校验(gulp-jshint)
  2. 合并js文件(gulp-concat)
  3. 压缩js代码(gulp-uglify)
  4. sass的编译(gulp-sass)
  5. less的编译(gulp-less)
  6. 压缩css(gulp-minify-css)
  7. 重命名(gulp-rename)

这些插件的安装命令如下:

1
npm install gulp-jshint gulp-concat gulp-uglify gulp-sass gulp-less gulp-minify-css gulp-rename --save-dev

完整配置文件:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
// 检查js脚本
gulp.task('lint', function() {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合并,压缩js文件
gulp.task('scripts', function() {
gulp.src('./src/js/*.js')
//合并js文件
.pipe(concat('all.js'))
//给文件添加.min后缀
.pipe(rename({ suffix: '.min' }))
//压缩脚本文件
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
// 编译sass
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 编译less
gulp.task('sass', function() {
gulp.src('./src/less/*.less')
.pipe(less())
.pipe(gulp.dest('./css'));
});
// 压缩css
gulp.task('style', function() {
gulp.src('./src/css/*.css')
.pipe(gulp.dest('./dist/style'))
.pipe(rename('all.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('./dist/style'));
});
// 默认任务
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
// 监听文件变化
gulp.watch('./src/js/*.js', function(){
gulp.run('lint', 'scripts');
});
gulp.watch('./src/sass/*.scss', function(){
gulp.run('sass');
});
gulp.watch('./src/less/*.less', function(){
gulp.run('less');
});
gulp.watch('./src/css/*.css', function(){
gulp.run('style');
});
});
知识共享许可协议
本作品由SeayXu创作,采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
基于http://git.seay.me上的作品创作。
可自由转载、引用,但需署名作者且注明文章出处,并以相同方式共享。
本文链接:Gulp.js基础入门教程
文章目录
  1. 1. 安装 Node
  2. 2. 创建项目
  3. 3. 安装 Gulp
  4. 4. 创建Gulp配置文件
  5. 5. 设置配置信息
    1. 5.1. 完整配置文件:
// //