安装 gulp
在 cmd 中输入命令全局安装 gulp
sudo npm install -g gulp
安装完成后再输入检查是否安装成功
npm install --save-dev gulp
在项目根目录下创建一个名为 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
安装依赖
现在，我们需要执行哪些任务，安装对应依赖的组件包。
编译 sass（或者 less）文件
压缩 js 文件
监听文件变更
npm install --save-dev gulp-sass gulp-uglify
（ 注意： npm install –save-dev (依赖包名) 下载的是最新版本的 ）
修改 gulpfile.js 文件
gulp 有5个方法：task，run，watch，src，dest，粘贴下面的代码到 gulpfile.js 里
// 引入 gulp
var gulp = require('gulp');
// 引入依赖的组件包
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
// 编译 sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 压缩 js
gulp.task('uglify', function () {
gulp.src('./js-build/*.js')
.pipe(uglify())
.pipe(gulp.dest('./js'));
});
// 默认任务
gulp.task('default', function () {
// 运行默认需要执行的任务
gulp.run('sass', 'uglify');
// 监听文件的变化
gulp.watch(['./scss/*.scss', './js-build/*.js'], function () {
// 执行文件变更后需要做的任务
gulp.run('sass', 'uglify');
})
});
目录
1、任务的名字可以换成你想要的名字
gulp.task('sass')
2、gulpfile.js中定义的任意任务可以单独运行，例如命令行输入
gulp sass
完整目录
本文内容均属个人原创作品，转载此文章须附上出处及原文链接。
加关注，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！