gulp 前端构建工具入门
标签(空格分隔): gulp
1. 安装gulp
npm i -g gulp
2. 创建gulp项目
2.1 Hello world
使用npm init
初始化项目文件夹。
使用npm install --save-dev gulp
本地安装gulp依赖。
根目录下新建gulpfile.js
。
按照编程的尿性,先试一下hello world:
var gulp = require('gulp');
gulp.task('hello', function() {
console.log('Hello world');
});
然后在命令行执行:gulp hello
:
2.2 编译sass
首先项目根目录新建src
文件夹,其下新建scss
文件夹和css
文件夹。
安装gulp-sass
:
npm install --save-dev gulp-sass
在scss
文件夹下新建sass文件:
$ percentage(5 / 7);
.test {
ceil($width);
}
编辑根目录下的gulpfile.js
:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('src/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'));
});
在根目录下命令行执行gulp sass
:
可以看到css
目录下自动出现了编译后的css文件。
2.3 使用通配符
类似于正则,可以匹配多个文件。
*.scss
匹配当前目录任意scss文件**/*.scss
匹配当前目录及子目录下的所有scss文件!exclude.scss
排除匹配项*.+(scss|sass)
匹配多项
上面例子的gulpfile可以改为:
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
});
2.4 监听文件变化
gulp.series
:按照顺序执行
gulp.paralle
:可以并行计算
watch
方法可以监听文件变化从而自动执行指定任务:
gulp.task('sass-watch', function() {
gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});
命令行执行gulp sass-watch
:
2.5 自动刷新浏览器
Browser Sync插件可以搭建本地服务器并且实时刷新浏览器。
npm install --save-dev browser-sync
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var server = browserSync.create();
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
// 刷新浏览器
.pipe(server.reload({
stream: true
}));
});
// 创建本地服务
gulp.task('browserSync', function(done) {
server.init({
server: {
baseDir: 'src'
}
});
done();
});
// 监听所有sass文件
gulp.task('sass-watch', function() {
gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});
// 最终任务
gulp.task('watcher', gulp.series('browserSync', 'sass', 'sass-watch'));
后续会学习一下优化以及gulp4的一些新写法。
To be continued... Last updated by Jehorn, 7:17 PM, Wednesday, February 27, 2019 (GMT+8)