gulp
gulp是基于Nodejs的自动任务运行器
能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤
使用流程:
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
1.安装 nodejs
node -v
npm -v
npm install -g (–save-dev)
-g 全局安装
–save 局部安装并保存到package.json配置中
-dev 存在package.json的devDependencies配置项里,意思是生产环境依赖的模块
npm install -g cnpm –registry=https://registry.npm.taobao.org
可以使用 cnpm 替代 npm 来安装资源
2.全局安装 gulp
npm install gulp@3 -g
或:
cnpm install gulp@3 -g
测试:gulp -v
3.在项目目录下生成 package.json 文件:
npm init
或
cnpm init
4.在项目目录中本地安装 gulp:
npm install gulp –save-dev
本地安装成功后,会生成 node_modules 文件夹
5.在项目目录中本地安装 gulp 插件https://www.npmjs.com
(1)压缩CSS:gulp-minify-css
npm install gulp-minify-css –save-dev
(2)压缩JS:gulp-uglify
npm install –save-dev gulp-uglify
(3)压缩Html:gulp-htmlmin
npm install –save-dev gulp-htmlmin
(4)将ES6转换为ES5:gulp-babel
npm install –save-dev gulp-babel @babel/core @babel/preset-env
文件合并
npm install –save-dev gulp-concat
gulpfile.js中修改js任务
var concat = require("gulp-concat"); gulp.task("js", function(){ gulp.src("src/js/**/*.js") .pipe(babel({ presets: ['@babel/env'] })) .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest("dist/js")) .pipe(connect.reload()); });
服务器:gulp-connect
npm install –save-dev gulp-connect
var connect = require('gulp-connect'); gulp.task('server', function() { connect.server({ livereload: true, port: 2333 }); });
处理图片
gulp.task("img", function(){ gulp.src('src/images/**/*') .pipe(gulp.dest('dist/images')) }) gulp.task("default", ["sass", "html", "minijs", "connect", "watch", "img"]);
sass转css gulp-sass
npm install –save-dev gulp-sass
var sass = require('gulp-sass'); gulp.task('sass', function(){ gulp.src('src/css/*.scss') .pipe(sass()) .pipe(gulp.dest('dist/css')) });
watch:监听文件的的变化执行对应的任务
给每一个任务加上pipe(connect.reload())
gulp.task('watch',function(){ gulp.watch('./src/css/*.scss',['sass']); gulp.watch('./src/*.html',['html']); gulp.watch('./src/css/*.css',['css']); gulp.watch('./src/js/*.js',['js']); }) gulp.task("default", ["sass", "html", "js", "connect", "watch"]);
gulpfile.js
const gulp = require('gulp'); const minifyCss = require('gulp-minify-css'); const uglify = require('gulp-uglify'); const babel = require('gulp-babel'); const htmlmin = require('gulp-htmlmin'); gulp.task('default', function() { // 将你的默认的任务代码放在这 console.log('gulp启动成功'); }); gulp.task("hello", function(){ console.log("hello gulp"); }); gulp.task("html", function(){ gulp.src("src/index.html") .pipe(htmlmin({ removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 input标签的 checked="true" removeEmptyAttributes: true,//删除所有空格作属性值 input 标签 removeScriptTypeAttributes: true,//删除script标签的type="textjavascript" removeStyleLinkTypeAttributes: true,//删除style标签和link标签的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS }) ) .pipe(gulp.dest("dist")) }); gulp.task("css", function(){ gulp.src("src/css/*.css") .pipe(minifyCss()) .pipe(gulp.dest("dist/css")); }); gulp.task("js", function(){ gulp.src("src/js/*.js") .pipe(uglify()) .pipe(gulp.dest("dist/js")); });