以Windows10为例
前提
本机已经安装并配置好NodeJS
安装
cmd进入Windows命令行窗口,进入测试目录,C:\Develop\gulptest,如果没有需要创建,在测试目录下执行
C:\Develop>mkdir gulptest
C:\Develop>cd gulptest
C:\Develop\gulptest>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (gulptest)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Develop\gulptest\package.json:
{
"name": "gulptest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
下面他会要求你填写一些项目信息,那个可以稍后再去填,所以一路回车就行了.他会在目录下生成一个 package.json 文件
全局安装gulp
C:\Develop\gulptest>npm install gulp-cli -g
C:\Develop\gulptest>npm install gulp -g
安装Gulp到项目中
输入以下命令把gulp安装到当前项目中,并告诉那个package.json你使用了gulp
npm install gulp -D
项目根目录下建立gulpfile.js
安装插件
npm install gulp-uglify -D
编写gulpfile.js
//获取刚刚安装的gulp
var gulp = require('gulp')
//获取刚刚安装的gulp-uglify模块
var uglify = require('gulp-uglify')
//压缩 js 文件
//在命令行使用 gulp uglifyscript 启动此任务
gulp.task('uglifyscript', done => {
// 1. 找到文件
gulp.src('src/js/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
done()
})
执行
C:\Develop\gulptest>gulp uglifyscript
[10:42:20] Using gulpfile C:\Develop\gulptest\gulpfile.js
[10:42:20] Starting 'uglifyscript'...
[10:42:20] Finished 'uglifyscript' after 9.48 ms
其他插件
参考:https://fdietz.github.io/2015/04/13/day-1-how-to-build-your-own-team-chat-in-five-days.html
gulp-sass
gulp-sourcemaps
gulp-autoprefixer
分别用来编译css