前端自动化构建工具gulp使用

Posted 2020-09-14

1. 全局安装 gulp：

$ npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

3. 在项目根目录下创建一个名为 package.json 的文件：

附上本人项目基本配置

{
"devDependencies": {
"concat": "0.0.1-security",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-cache": "^0.4.5",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.1.1",
"gulp-jshint": "^2.0.4",
"gulp-less": "^3.3.0",
"gulp-livereload": "^3.8.1",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^3.0.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-rev-collector": "^1.1.1",
"gulp-ruby-sass": "^2.1.1",
"gulp-sass": "^3.1.0",
"gulp-sequence": "^0.4.6",
"gulp-sourcemaps": "^2.4.1",
"gulp-uglify": "^2.0.1",
"gulp-util": "^3.0.8",
"gulp-watch-path": "^0.1.0",
"gulp-webserver": "^0.9.1",
"htmlmin": "0.0.7",
"http-server": "^0.9.0",
"imagemin-pngquant": "^5.0.0",
"jshint": "^2.9.4",
"run-sequence": "^1.2.2",
"sass": "^0.5.0",
"stream-combiner2": "^1.1.1"
}
}

4. 项目目录结果：

5. 在项目根目录下创建一个名为 gulpfile.js 的文件：

 

var gulp = require(‘gulp‘),
less = require(‘gulp-less‘),
sass = require(‘gulp-sass‘),
connect = require(‘gulp-connect‘),
livereload = require(‘gulp-livereload‘),
sourcemaps = require(‘gulp-sourcemaps‘),
htmlmin = require(‘gulp-htmlmin‘),
minifycss = require(‘gulp-minify-css‘),
concat = require(‘gulp-concat‘),
uglify = require(‘gulp-uglify‘),
rename = require(‘gulp-rename‘),
jshint = require(‘gulp-jshint‘),
notify = require(‘gulp-notify‘),
imagemin = require(‘gulp-imagemin‘),
pngquant = require(‘imagemin-pngquant‘),
runSequence = require(‘run-sequence‘),
rev = require(‘gulp-rev‘),
cache = require(‘gulp-cache‘),
autoprefixer = require(‘gulp-autoprefixer‘),
clean = require(‘gulp-clean‘),
revCollector = require(‘gulp-rev-collector‘);

// less编译
gulp.task(‘less‘, function() {
gulp.src(‘src/less/*.less‘)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write(‘./‘))
.pipe(gulp.dest(‘src/css/‘));
});

// sass编译
gulp.task(‘sass‘, function() {
gulp.src(‘src/sass/*.scss‘)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write(‘./‘))
.pipe(gulp.dest(‘src/css/‘));
});

 

//自动生成版本号,避免缓存
gulp.task(‘revCss‘, function() {
return gulp.src(‘src/css/*.css‘)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(‘src/rev/css‘));
});

gulp.task(‘revJs‘, function() {
return gulp.src(‘src/js/*.js‘)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(‘src/rev/js‘));
});

//Html替换css、js文件版本
gulp.task(‘revHtml‘, function() {
return gulp.src([‘src/rev/**/*.json‘, ‘src/html/*.html‘])
.pipe(revCollector())
.pipe(gulp.dest(‘src/html‘));
});

//开发构建
gulp.task(‘dev‘, function(done) {
condition = false;
runSequence(
[‘revCss‘], [‘revJs‘], [‘revHtml‘],
done);
});

//css处理
// gulp.task(‘minifycss‘,function(){
// return gulp.src(‘css/*.css‘) //设置css
// .pipe(concat(‘order_query.css‘)) //合并css文件到"order_query"
// .pipe(gulp.dest(‘styles‘)) //设置输出路径
// .pipe(rename({suffix:‘.min‘})) //修改文件名
// .pipe(minifycss()) //压缩文件
// .pipe(gulp.dest(‘styles‘)) //输出文件目录
// .pipe(notify({message:‘css task ok‘})); //提示成功
// });

// //JS处理
// gulp.task(‘minifyjs‘,function(){
// return gulp.src(‘js/*.js‘) //选择合并的JS
// .pipe(concat(‘order_query.js‘)) //合并js
// .pipe(gulp.dest(‘dist/js‘)) //输出
// .pipe(rename({suffix:‘.min‘})) //重命名
// .pipe(uglify()) //压缩
// .pipe(gulp.dest(‘dist/js‘)) //输出
// .pipe(notify({message:"js task ok"})); //提示
// });

 

//压缩html
gulp.task(‘html‘, function() {
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
gulp.src(‘src/html/*.html‘)
.pipe(htmlmin(options))
.pipe(gulp.dest(‘dist/html‘));
});

 

// JS hint task
// gulp.task(‘jshint‘, function() {
// gulp.src(‘src/js/*.js‘)
// .pipe(jshint())
// .pipe(jshint.reporter(‘default‘));
// });

//压缩js
gulp.task(‘uglifyjs‘, function() {
gulp.src(‘src/js/*.js‘)
.pipe(uglify())
.pipe(gulp.dest(‘dist/js‘))
});

//压缩css
gulp.task(‘minifycss‘, function() {
gulp.src(‘src/css/*.css‘)
.pipe(minifycss())
.pipe(gulp.dest(‘dist/css‘))
});

//压缩images
gulp.task(‘imagemin‘, function() {
gulp.src(‘src/images/*.{png,jpg,gif,ico}‘)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{ removeViewBox: false }], //不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest(‘dist/images‘));
});

//创建本地服务器
gulp.task(‘webserver‘, function() {
connect.server({
livereload: true
});
});

//清空项目输出目录
gulp.task(‘clean‘, function() {
return gulp.src([‘dist/js/‘, ‘dist/css/‘, ‘dist/html/‘, ‘dist/images/‘], { read: false })
.pipe(clean());
});

//监控文件变化
gulp.task(‘watch‘, function() {

gulp.watch(‘src/less/*.less‘, [‘less‘]);
gulp.watch(‘src/sass/*.scss‘, [‘sass‘]);
gulp.watch(‘html/*.html‘, [‘html‘]);
gulp.watch(‘src/js/*.js‘, [‘uglifyjs‘]);
gulp.watch(‘src/css/*.css‘, [‘minifycss‘]);
gulp.watch(‘src/images/*.*‘, [‘imagemin‘]);

});

// 将你的默认的任务代码放在这
gulp.task(‘default‘, [‘clean‘], function() {
gulp.start(‘less‘, ‘sass‘, ‘uglifyjs‘, ‘minifycss‘, ‘html‘, ‘imagemin‘, ‘dev‘, ‘watch‘, ‘webserver‘);
});

 

6. 运行 gulp：

$ gulp