前端构建工具Gulp

最新推荐文章于 2024-05-03 18:25:28 发布

amberXu璇

最新推荐文章于 2024-05-03 18:25:28 发布

阅读量247

点赞数

分类专栏：前端 Gulp 文章标签： Gulp

本文链接：https://blog.csdn.net/xuxuan1997/article/details/83316990

版权

前端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

Gulp

1 篇文章 0 订阅

订阅专栏

gulp

Gulp是构建工具，如今最流行的两个构建工具是Gulp和Grunt，主要区别是你如何使用他们构建自动化工作流。与Grunt相比，Gulp更加简洁，执行效率更高

搭建web服务器
文件保存时自动重载浏览器
使用预处理器如Sass、LESS
优化资源，比如压缩CSS、JavaScript、压缩图片
甚至可以搭建一个静态页面生成器

安装

npm install gulp -g

####创建Gulp项目

新建project文件夹
npm init
npm install gulp --save-dev通知计算机在package.json中添加gulp依赖
在根目录下创建gulpfile.js文件 **var gulp = require(‘gulp’);**告知Node去node_modules中查找gulp包,找到之后会赋值给gulp变量，进行使用。

gulp.task(‘task-name’, function() {
// Stuff here
});
例如
gulp.task(‘hello’, function() {
console.log(‘Hello World!’);
});

命令行中执行gulp task-name，将运行该任务

Gulp执行预处理

编译Sass

安装：npm install gulp-sass --save-dev
在gulpfile中引入插件，用变量保存

var gulp = require(‘gulp’);
// Requires the gulp-sass plugin
var sass = require(‘gulp-sass’);

使用,需提供源文件和输出位置

gulp.task(‘sass’, function(){
return gulp.src(‘source-files’)
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest(‘destination’))
});

创建app/scss文件夹，里面有个styles.scss文件
生成的CSS文件保存到app/scss

gulp.task(‘sass’, function(){
return gulp.src(‘app/scss/styles.scss’)
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest(‘app/css’))
});

####监听Sass文件
watch方法

gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
例如
gulp.watch('app/scss/**/*.scss', ['sass']);

变成一个任务

gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', ['sass']);
  // Other watchers
})

有了监听，每次修改文件，Gulp都将自动为我们执行任务
刷新浏览器,不用手动按Command + R

使用Browser Sync自动刷新

搭建简单的本地服务器并能实时刷新浏览器

安装：npm install browser-sync --save-dev
引入：var browserSync = require(‘browser-sync’);
使用：

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
  })
})

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

####优化CSS和JS文件
压缩和拼接。减少体积和HTTP次数。

合并

问题:很难按照正确的顺序合并文件
gulp-useref
gulp-useref会将多个文件拼接成单一文件，并输出到相应目录

安装gulp-useref

npm install gulp-useref --save-dev

引用
var useref = require(‘gulp-useref’);
使用:新版的gulp-useref已经不需要写多余的useref.assets了

<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

gulp.task('useref', function(){
  return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});
合并三个script标签成一个文件，并保存到dist/js/main.min.js。

压缩

gulp-uglify插件

安装

npm install gulp-uglify --save-dev
2.使用

var uglify = require(‘gulp-uglify’);
gulp.task(‘useref’, function(){
return gulp.src(‘app/*.html’)
.pipe(uglify()) // Uglifies Javascript files
.pipe(useref())
.pipe(gulp.dest(‘dist’))
});

使用gulp-minify-css压缩css

npm install gulp-if gulp-minify-css --save-dev

使用gulp-imagemin插件优化图片

npm install gulp-imagemin --save-dev
引入
var imagemin = require(‘gulp-imagemin’);
gulp.task(‘images’, function(){
return gulp.src(‘app/images/**/*.+(png|jpg|gif|svg)’)
.pipe(imagemin())
.pipe(gulp.dest(‘dist/images’))
});