🐯前端工作流-合并、压缩、优化
npm install
-
易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
-
构建快速 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
-
插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
-
易于学习 通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。
前端工作流
vue-cli ??? 自动打包 vue build打包时候其实就是在文件的合并,压缩,优化,到dist文件夹
yarn add gulp -S
const gulp = require('gulp')
// 任务名、任务事
gulp.task('hello', function () {
console.log('Gulp负责前端开发阶段的任务,文件的合并,压缩,优化')
})
gulp hello
gulp.task('default', ['hello'])
// src 代表根目录
gulp.task('copy-index', function() {
return gulp.src('index.html')
.pipe(gulp.dest('dist'))
})
// *.*就是全部文件
// */* 走一级,匹配下一层
// **/* 所有都要
gulp.task('images', function () {
return gulp.src('images/icons/*.{png,jpg}')
.pipe(gulp.dest('dist/images/icon'))
})
gulp.task('data', function () {
return gulp.src(['xml/*.xml','json/*.json'])
.pipe(gulp.dest('dist/data'))
})
排除类似secret-01.json的文件
return gulp.src(['xml/*.xml','json/*.json','!json/secret-*.json'])
.pipe(gulp.dest('dist/data'))
gulp.task('copy-index', function() {
return gulp.src('index.html')
.pipe(gulp.dest('dist'))
})
gulp.task('watch', function () {
gulp.watch('index.html', ['copy-index'])
})
开放监听
gulp watch
安装包 yarn add gulp-sass -S npm i gulp-sass --save-dev yarn add --dev gulp-sass
pipe过一下
gulp.task('sass', function() {
gulp.src('stylesheet/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
})
yarn add --dev gulp-connect
然后
const connect = require('gulp-connect')
gulp.task('server',function() {
connect.server({
root: 'dist/',
port: 3000,
livereload: true
})
})
gulp.task('watch', function() {
gulp.watch('index.html', ['copy-index'])
})
gulp.task('copy-index', function() {
return gulp.src('index.html')
.pipe(gulp.dest('dist'))
.pipe(connect.reload())
})
gulp.task('default', ['server', 'watch'])
yarn add --dev gulp-concat
这样引入??有两个请求哦!!减少请求数量!
gulp.task('script', function() {
return gulp.src(['javascripts/jquery.js',
'javascripts/modernizr.js'])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'))
})
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
gulp.task('zip', function() {
return gulp.src(['javascripts/jquery.js',
'javascripts/modernizr.js'])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'))
.pipe(uglify())
.pipe(rename('vendor.min.js'))
.pipe(gulp.dest('dist/js'))
})
const minify = require('gulp-minify-css')
gulp.task('minify', function() { gulp.src('stylesheet/**/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css')) .pipe(minify()) .pipe(rename('style.min.css')) .pipe(gulp.dest('dist/css')) })
const imagemin = require('gulp-imagemin')
gulp.task('imagemin', function() {
return gulp.src('images/icons/*.{png,jpg}')
.pipe(gulp.dest('dist/images/icon'))
.pipe(imagemin())
.pipe(gulp.dest('dist/images/icon'))
})