入门指南–引用gulp官网示例
全局安装 gulp:
1 | $ npm install --global gulp |
作为项目的开发依赖(devDependencies)安装:
1 | $ npm install --save-dev gulp |
在项目根目录下创建一个名为 gulpfile.js 的文件:
1 | var gulp = require('gulp'); |
运行 gulp
1 | $ gulp //默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。 |
至此,一个简单的gulp已经完成,接下来让我们来完善部分功能
gulp功能完善
生成package.json文件
1 | $ npm init //一直回车,有需要的可以设置 |
安装所需包
使用淘宝镜像
1 | $ npm install -g cnpm --registry=https://registry.npm.taobao.org |
接着1
$ cnpm i browser-sync gulp gulp-clean-css gulp-imagemin gulp-rename gulp-sass gulp-uglify gulp.spritesmith gulp-autoprefixer --save
新建gulpfile.js文件
添加1
2
3
4
5
6
7
8
9var gulp = require('gulp');
var browserSync = require('browser-sync').create(); //通过流的方式创建任务流程, 这样您就可以在您的任务完成后调用reload,所有的浏览器将被告知的变化并实时更新
var sass = require('gulp-sass'); //sass转css
var reload = browserSync.reload;
var minifyCSS = require('gulp-clean-css') //css压缩
var uglify = require('gulp-uglify') //js压缩
var imagemin = require('gulp-imagemin') //图片压缩
var rename = require('gulp-rename') //文件重命名
var autoprefixer = require('gulp-autoprefixer') //自动添加前缀
设置默认文件地址
1 | code为文件夹,里面存放html css js文件 |
gulp.task(name[, deps], fn)
1 | name: 任务的名字 |
scss编译后的css将注入到浏览器里实现更新
1 | gulp.task('sass', function() { |
雪碧图(有需要可以尝试)
1 | var spritesmith = require('gulp.spritesmith'); |
监听css文件
1 | gulp.task('css', function() { |
监听js文件
1 | gulp.task('js', function() { |
压缩图片任务
1 | // 在命令行输入 gulp images 启动此任务 |
最后控制台输入gulp执行
1 | gulp.task('default', ['serve']); |
如果觉得帮助到了你,欢迎star -> https://github.com/wclimb/wclimb.github.io
完整代码
文件目录
1 | -code |
package.json
1 | { |
gulpfile.js
1 | var gulp = require('gulp'); |