Gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务：
- 搭建web服务器
- 文件保存时自动重载浏览器
- 使用预处理器如Sass、LESS
- 优化资源，比如压缩CSS、JavaScript、压缩图片
安装
Gulp官网 有详细的安装教程，我以前也有篇文章介绍如何安装gulp的，本篇文章就不写了。
初始化项目
在项目文件夹下打开终端执行npm init命令
npm init
npm init命令会为你创建一个package.json文件，这个文件保存着这个项目相关信息。比如你用到的各种依赖（这里主要是插件）
一路回车就可以了
本地安装gulp
npm install gulp --save-dev
使用–save-dev，将通知计算机在package.json中添加gulp依赖。
创建gulp任务
先在根目录下创建gulpfile.js文件
/*gulpfile.js*/
var gulp = require('gulp');
这行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局环境中查找。
找到之后就会赋值给gulp变量，然后就可以使用它了。
最简单的demo
gulp.task('task-name', function() {
console.log('hello,world!');
});
然后在命令行中执行gulp hello
就会输出“Hello World!”
利用gulp编译sass
sass最终输出的样式包括下面几种样式风格：
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
-
使用npm install 命令安装
npm install gulp-sass --save-dev -
在gulpfile中引入插件，用变量保存
var gulp = require('gulp'); var sass = require('gulp-sass'); -
在任务中使用
gulp.task('sass', function(){ return gulp.src('source-files')//源文件路径 .pipe(sass({outputStyle: 'compact'})) // 使用 gulp-sass 插件 .pipe(gulp.dest('destination'))//输出路径 });
我们需要给sass任务提供源文件和输出位置。所以我们先在项目中创建app/scss文件夹，里面有个styles.scss文件。
这个文件将在gulp.src中用到。
sass处理之后，我们希望它生成css文件并产出到css目录下，可以这样写：
gulp.task('sass', function(){
return gulp.src('scss/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('css'))
});
然后在命令行中运行gulp sass
通常我们不止有一个scss文件，这时候可以使用Node通配符。
Node中的通配符
通配符是一种匹配模式，允许你匹配到多个文件。不止是Node，很多平台都有，有点像正则表达式。
大部分时候，我们只需要用到下面4种匹配模式：
-
*.scss：*号匹配当前目录任意文件，所以这里*.scss匹配当前目录下所有scss文件 -
**/*.scss：匹配当前目录及其子目录下的所有scss文件。 -
!not-me.scss：！号移除匹配的文件，这里将移除not-me.scss -
*.+(scss|sass)：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件。
那么还是上面的栗子，改造一下：
gulp.task('sass', function() {
return gulp.src('scss/**/*.scss') // 匹配在scss和它的子目录下的所有后缀为.scss的文件
.pipe(sass())
.pipe(gulp.dest('css'))
})
任何app下的scss文件，在执行命令之后将生成对应的css文件存放到相应路径。
现在我们能处理多个文件了，但是不想每次都要执行命令，怎么办？
Gulp就是为懒人而生的，我们可以使用watch命令，自动检测并执行。
监听文件
Gulp提供watch方法给我们，语法如下：
// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
将上面的栗子再改下：
// Gulp watch syntax
gulp.watch('scss/**/*.scss', ['sass']);
通常我们监听的还不只是一个文件，把它变成一个任务：
gulp.task('watch', function(){
gulp.watch('scss/**/*.scss', ['sass']);
})
在命令行执行gulp watch命令。
有了监听，每次修改文件，Gulp都将自动为我们执行任务。
优化css和JavaScript文件
说到优化的时候，我们需要想到：压缩，拼接。也就是减少体积和HTTP次数。
开发者面临的主要问题是很难按照正确的顺序合并文件。
<body>
<!-- other stuff -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
</body>
gulp-useref
gulp-useref会将多个文件拼接成单一文件，并输出到相应目录。
安装
npm install gulp-useref --save-dev`
引用
var useref = require('gulp-useref');`
使用
gulp.task('useref', function(){
return gulp.src('*.html')
.pipe(useref())
.pipe(gulp.dest('dist'));//这里将dist设为生产目录
});
执行useref命令，Gulp将合并三个script标签成一个文件，并保存到dist/js/main.min.js。
gulp-uglify
合并完之后，我们再来压缩。使用gulp-uglify插件。
安装
npm install gulp-uglify --save-dev
引用
var uglify = require('gulp-uglify');
使用
gulp.task('useref', function(){
return gulp.src('*.html')
.pipe(uglify())
.pipe(useref())
.pipe(gulp.dest('dist'))
});
执行useref命令，Gulp将合并三个script标签成一个文件，并保存到dist/js/main.min.js。
注意：执行完useref后，html中的script路径将只剩下main.min.js。
gulp-minify-css
gulp-useref同样可以用在css上。除了压缩，需要区分，其它内容同js一样。所以我们使用gulp-if来做不同处理。
使用gulp-minify-css压缩css。
安装
`$ npm install gulp-if gulp-minify-css --save-dev`
使用
var gulpIf = require('gulp-if');var minifyCSS = require('gulp-minify-css');gulp.task('useref', function(){ return gulp.src('app/*.html')
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', minifyCSS())) // Uglifies only if it's a Javascript file
.pipe(gulpIf('*.js', uglify()))
.pipe(useref())
.pipe(gulp.dest('dist'))
});`
在项目中应用
规范目录结构
|- build/ --开发目录
|- css/
|- images/
|- js/
|- sass/
|- index.html
|- dist --发布目录
|- css/
|- images/
|- js/
|- index.html
|- gulpfile.js
|- node_modules/
|- package.json
上面是我自己习惯用的项目目录结构
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),;
gulp.task('watch', async ()=>{
gulp.watch('./**/*', async()=>{
/*编译sass文件*/
gulp.src('app/sass/**/*.scss')
.pipe(sass({outputStyle: 'expanded'})) //展开输出方式
.pipe(gulp.dest('app/css')) //输出到开发文件夹
.pipe(sass({outputStyle: 'compressed'})) //压缩输出方式
.pipe(gulp.dest('dist/css')) //输出到发布文件夹
/*压缩js文件*/
.pipe(uglify())
.pipe(gulp.dest('dist'))//将压缩后的js文件同步到发布文件夹
/*监控image文件，同步到发布文件夹*/
gulp.src('app/images/*')
.pipe(gulp.dest('dist/images'))
/*监控js文件，压缩后的文件输出到发布文件夹*/
gulp.src('app/**/*.js')
.pipe(gulp.dest('dist/js'))
/*监控css文件，同步到发布文件夹*/
gulp.src('app/**/*.css')
.pipe(gulp.dest('dist/css'))
/*监控开发文件夹下的所有html文件，同步到发布文件夹*/
gulp.src('app/**/*.html')
.pipe(gulp.dest('dist'))
/*将发布文件夹下所有文件部署到服务器*/
gulp.src("dist/**/*")
.pipe(gulp.dest("D:\\phpStudy\\WWW\\xiaoguantea"));
});
});
我自己的项目目前只用过
gulp-sass和gulp-uglify来编译scss文件和压缩js文件，刚接触gulp，边看官网文档一边参考别人博客的教程，难免有错误和不足之处，如果有发现哪里有问题可以私信我哟！
网友评论