内容简介:1、安装全局gulp2、初始化package.jsonnpm init
npm install --save-dev gulp-concat//js合并插件 npm install --save-dev gulp-uglify//js压缩插件 npm install --save-dev gulp-cssnano//css压缩插件 npm install --save-dev gulp-imagemin//图片压缩插件 npm install --save-dev gulp-htmlmin//html压缩插件 npm install --save-dev del//文件删除模块 npm install --save-dev gulp merge-stream//在一个任务中使用多个文件来源
搭建gulp环境
按装gulp
1、安装全局gulp
npm install gulp -g
2、初始化package.json
npm init
3、在本项目安装引入的gulp
npm install gulp --save-dev
4、在本项目按照sass相关插件
npm install --save-dev gulp-sass
5、本步骤按需求来按照,下面gulp相关插件可以搭建完整的css、js相关压缩
npm install --save-dev gulp-concat gulp-uglify gulp-cssnano gulp-imagemin gulp-htmlmin merge-stream
配置gulpfile.js
在项目根目录中新建gulpfile.js文件(重要!!!文件名为固定不变的。)输入以下内容:
const gulp = require('gulp'); //获取gulp const sass = require('gulp-sass'); //获取gulp const browsersync = require('browser-sync').create(); //获取browsersync const cssnano = require('gulp-cssnano'); //css压缩插件 const merge = require('merge-stream'); //操作css文件 /** * 如果是一个任务处理多文件夹的话, * 只要声明不同的变量, * 然后return merge(xx, xx)合并返回即可 * 如下 style 任务 */ gulp.task('style', function() { const scssIndex = gulp.src('./common/scss/*.scss') //需要编译scss的文件 .pipe(sass({outputStyle: 'compressed'}) //压缩格式:nested(嵌套)、compact(紧凑)、expanded(扩展)、compressed(压缩) .on('error', sass.logError)) .pipe(cssnano()) //css压缩 .pipe(gulp.dest('./common/css')) //输出路径 .pipe(browsersync.stream()); //文件有更新自动执行 const scssComponents = gulp.src('./common/components-scss/*.scss') //需要编译scss的文件 .pipe(sass({outputStyle: 'compressed'}) //压缩格式:nested(嵌套)、compact(紧凑)、expanded(扩展)、compressed(压缩) .on('error', sass.logError)) .pipe(cssnano()) //css压缩 .pipe(gulp.dest('./common/components-css')) //输出路径 .pipe(browsersync.stream()); //文件有更新自动执行 return merge(scssIndex, scssComponents); }); //监听scss文件 gulp.task('serve',function() { gulp.start('style'); gulp.watch('./common/scss/*.scss', ['style']); gulp.watch('./common/components-scss/*.scss', ['style']); }); //编译scss文件:gulp default gulp.task('default',['serve']);
- 本文出自本人博客 使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件
- 本文案例在Github上 使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件案例浏览 。总结和写作也是需要血汗的,喜欢的请给个star。
- 本案例除了gulp配置sass外还是一个rem适配的案例,如有不妥请大神指正,谢谢~
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- iOS手动编译并搭建FFmpeg
- Linux 搭建 Android 编译构建环境
- AndroidStudio 3.0 NDK开发1——环境搭建与编译
- 全文搜索引擎ElasticSearch源码编译和Debug环境搭建
- 终极解决:window环境下vscode搭建go语言编译环境
- 开发人员学Linux(5):CentOS7编译安装Nginx并搭建Tomcat负载均衡环境
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。