1. 安装nodeJS
2. 全局安装 gulp
npm install gulp -g
3.首先，我们新建一个gulp文件夹，并在该目录下执行 npm init 或者 npm init -y 命令，然后gulp 文件夹会多一个package.json文件：
{
"name": "gulp-demo",
"version": "1.0.0",
"description": "gulp构建工具",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"gulp"
],
"author": "guofq",
"license": "ISC"
}
然后在项目中安装 gulp 以及依赖项：
npm install gulp -D
执行完之后，gulp将创建node_modules文件夹
然后我们建如下图的项目目录：
image.png
4. 根目录下创建一个gulpfile.js
第一个Gulp任务
// 默认任务 default
let gulp = require('gulp');
gulp.task('default', function() {
console.log('Hello World!');
});
// 还可以使用 promise 实现
gulp.task('default', () => {
return new Promise(function (resolve, reject) {
console.log('hello, world123!');
resolve();
})
})
然后在命令窗口输入 gulp，即可看到Hello World! 或 hello,world123!
我们还可以自定义任务名：
let gulp = require('gulp');
gulp.task('hello', function() {
console.log('Hello World!');
});
那我们就需要在命令窗口执行 gulp hello 了。
5. Gulp执行预处理
我们使用gulp-sass插件来编译Sass
npm install gulp-sass -D
我们需要给sass任务提供源文件和输出位置。
我们将会用到gulp.src() 和 gulp.dest()。
sass处理之后，我们希望它在 app/css 内生成相应的 css 文件
let gulp = require('gulp');
let sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('app/scss/styles.scss')
.pipe(sass()) // sass转css方法
.pipe(gulp.dest('app/css'))
});
// Promise 写法
gulp.task('sass', () => {
return new Promise(function (resolve, reject) {
gulp.src('app/scss/**/*.scss')//待编译文件
.pipe(sass()) //sass转css方法
.pipe(gulp.dest('app/css')) //输出文件路径
resolve();
});
})
app/sass/style.scss
body {
background: skyblue;
color: #fff;
text-align: center;
height: 120px;
width: 100%;
display: block;
}
大部分时候，我们只需要用到下面4种匹配模式：
*.scss ： *.scss 匹配当前目录下所有scss文件
**/*.scss ： 匹配当前目录及其子目录下的所有scss文件。
!not-me.scss ：！号移除匹配的文件，这里将移除not-me.scss
*.+(scss|sass) ：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。
然后我们执行 gulp sass，即可在app/css 下生成相应的 css 文件，如下图
image.png
监听 sass 文件修改
let gulp = require('gulp');
let sass = require('gulp-sass');
gulp.task('sass', () => {
return new Promise((resolve, reject) => {
gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
resolve()
})
})
gulp.task('watch', () => {
gulp.watch('app/scss/**/*.scss', ['sass']);
})
执行 gulp watch，效果如下图，一直处于监听 scss 中
image.png
6. 使用Browser Sync自动刷新
Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器
npm install browser-sync --save-dev
这里没有gulp- 前缀，切记
创建一个 broswerSync 任务，我们需要告知它，根目录在哪里
let browserSync = require('browser-sync');
gulp.task('browserSync', () => {
browserSync({
server: {
baseDir: 'app'
},
port: 3001 // 默认 3000
})
})
然后我们创建一个能够实时刷新浏览器的本地服务器
let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync');
gulp.task('browserSync', () => {
browserSync({
server: {
baseDir: 'app'
}
port: 3001 // 默认 3000
})
})
gulp.task('sass', () => {
return new Promise((resolve, reject) => {
gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}));
resolve();
})
})
gulp.task('watch', ['browserSync', 'sass'], () => {
gulp.watch('app/scss/**/*.scss', ['sass']); // 监听scss文件修改
gulp.watch('app/*.html', browserSync.reload); // 监听 html 页面修改
gulp.watch('app/js/**/*.js', browserSync.reload); // 监听 js 修改
})
到目前为止，我们做了三件事：
可运转的web开发服务
使用Sass预处理器
自动刷新浏览器
7. 使用gulp-useref 和 gulp-concat 合并文件
npm install gulp-useref --save-dev // 合并 js 文件
npm install gulp-concat --save-dev // 连接输出文件名
目录结构如下
image.png
新建 js/index.js 和 js/main.js 以及 空的 build 文件夹，首页接入压缩后的 name.min.js
let gulp = require('gulp');
let sass = require('gulp-sass');
let useref = require('gulp-useref');
let concat = require('gulp-concat');
let pathjs = {
scripts:['app/js/index.js','app/js/main.js']
}
gulp.task('useref', function(){
return gulp.src(pathjs.scripts)
.pipe(concat('main.min.js')) // 连接的文件名
.pipe(useref()) // 合并 js 文件 （不压缩）
.pipe(gulp.dest('app/build')); // 生成文件的目录
});
然后执行 gulp useref，即可在 build 文件夹下生成 main.min.js，如下图：
main.min.js 文件内容（未被压缩）：
var index={};
index={
test:function(argument){
console.log('test');
}
}
index.test();
var main = {};
main.test=function(argument){
console.log("main test");
}
main.test();
8. 使用gulp-uglify 压缩 js 文件
npm install gulp-uglify --save-dev
话不多说，上代码：
let gulp = require('gulp');
let sass = require('gulp-sass');
let useref = require('gulp-useref');
let concat = require('gulp-concat');
let minijs = require('gulp-uglify');
let paths = {
scripts:['app/js/index.js','app/js/main.js']
}
gulp.task('minijs', function(){
return gulp.src(paths.scripts)
.pipe(concat('main.min.js'))
.pipe(minijs())
.pipe(gulp.dest('app/build'));
});
生成的main.min.js （压缩代码）：
var index={};(index={test:function(t){console.log("test")}}).test();
var main={test:function(t){console.log("main test")}};main.test();
9. 使用gulp-clean-css合并压缩css
gulp-useref 同样可以用在 css 上。除了压缩，需要区分，其它内容同js一样。所以我们使用 gulp-if 来做不同处理。
使用gulp-clean-css压缩css。
npm install gulp-if gulp-clean-css --save-dev
let gulp = require('gulp');
let sass = require('gulp-sass');
let useref = require('gulp-useref');
let concat = require('gulp-concat'); // css js 合并
var minicss= require('gulp-clean-css'); // css 压缩
var pathcss = {
styles:styles:['app/css/style.css', 'app/css/index.css', 'app/css/detail.css']
}
gulp.task('minicss', function(){
return gulp.src(pathcss.styles)
.pipe(concat('main.min.css'))
.pipe(minicss())
.pipe(gulp.dest('app/build'));
});
网友评论