GULP
gulp能够做什么东西?(以前这些工作都是人工做的)
- 检查JavaScript
- 编译Sass(或Less之类的)文件
- 图片压缩
- Css Js 合并
- Css Js 内联
- 压缩并重命名合并后的JavaScript
- 变更静态资源
- 给静态资源添加md5
- 合并雪碧图
- 自动刷新浏览器
- ESLint
- rem移动端适配方案
等等。。
gulp的配置文件gulpfile.js(其实整个gulp的配置文件,基本上都是在做一些任务的配置,比如创建任务,监听任务等等)
结合gulp的API https://www.gulpjs.com.cn/docs/api/
gulp只有5个方法
- task:这个API用来创建任务,在命令行下可以输入gulp test来执行test的任务
- run:这个API用来运行任务
- watch:这个API用来监听任务
- src:这个API设置需要处理的文件路径,可以是多个文件以数组的形式[main.scss,vender.scss],也可以是正在表达式/*.scss
- dest:这个API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,一个可以输出压缩后的版本
gulp的使用:
通过npm建立一个项目
//我的叫做gulp-study,也就是建立一个文件夹然后在当前文件夹下面运行npm init
//建立文件夹
mkdir gulp-study
//在当前文件夹运行npm init初始化项目
npm init
通过npm自动话构建需要的依赖
- gulp:本地gulp
- gulp-concat:主要用于合并文件,减少http请求
- gulp-imagemin:用于压缩图片
- gulp-jshint:用于js检查
- gulp-less:用于编译less文件
- gulp-minify-css:用于压缩css文件
- gulp-rename
- gulp-sass:用于编译sass文件
gulp-uglify:用于打乱文件
npm install –save-dev gulp gulp-concat jshint gulp-jshint gulp-less gulp-rename gulp-sass gulp-uglify gulp-minify-css gulp-imagemin
安装完成后的package.json就是下面的样子
{
"name": "gulp-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "npm run start"
},
"author": "LQ",
"license": "MIT",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^4.1.0",
"gulp-jshint": "^2.1.0",
"gulp-less": "^3.5.0",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^4.0.1",
"gulp-uglify": "^3.0.0",
"jshint": "^2.9.5",
"node-less": "^1.0.0",
"require": "^2.4.20"
},
"dependencies": {
"node-sass": "^4.9.0"
}
}
很重要的一步 编写gulpfile.js文件(自动话构建就是根据这个文件来)
//gulp是代码由于配置的思想
//gulp只有5个方法,task,run,watch,src,和dest
//引入gulp
var gulp = require("gulp");
//引入组件
var jshint = require("gulp-jshint");
var sass = require("gulp-sass");
var less = require("gulp-less");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var minifycss = require("gulp-minify-css");
var rename = require("gulp-rename");
//gulp.src("src/js/*.js");
//创建一个个任务编译less
gulp.task('less',function(){
gulp.src('src/less/*.less') //该任务针对的文件夹
.pipe(less()) //该任务的调用模块
.pipe(minifycss())
.pipe(gulp.dest("./dist/css")); //另存压缩后的文件,将会在dist/css下面生成index.css
});
//创建另外一个任务用于检查脚本
gulp.task("lint",function(){
gulp.src("src/js/*.js")
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
//创建一个任务用于合并压缩文件
gulp.task("scripts",function(){
gulp.src("src/js/*.js")
.pipe(concat('all.js'))//合并之后的文件
.pipe(rename('all.min.js'))//压缩后的文件
.pipe(uglify())
.pipe(gulp.dest("./dist"));
});
//默认任务
gulp.task('default', function(){
//默认执行的方法,引号内的内容对应上面task写的内容
gulp.run('lint', 'less', 'scripts');
// 监听JS文件变化
gulp.watch('src/js/*.js', function(){
//运行多个任务
gulp.run('lint', 'less', 'scripts');
});
// 监听less文件变化
gulp.watch('src/less/*.less', function(){
gulp.run('lint', 'less', 'scripts');
});
});
我的项目结构如下:
上述完成编写以后就是运行命令进行自动化构建了
//指的就是运行gulpfile.js中配置的default任务,当然也可以单独运行其它的任务,例如gulp lint等等
gulp default
文件改变后,文件不会主动编译问题,需要在控制台输入enter键,移除了default任务中的run方法后改写为如下形式就可以了
//默认任务
gulp.task('default', function(){
gulp.run('lint', 'less', 'scripts');
// 监听JS文件变化
gulp.watch('src/js/*.js',["scripts"]);
// 监听less文件变化
gulp.watch('src/less/*.less',["less"]);
});
上面写法和下面写法一样
//默认任务
gulp.task('default', function(){
gulp.run('lint', 'less', 'scripts');
// 监听文件变化
gulp.watch(['src/js/*.js','src/less/*.less'],["scripts","less"]);
});
构建中我遇到的问题:在运行自动话构建过程中失败,报错说是缺少了node-sass,安装不成功,解决方式在如下链接中。https://segmentfault.com/a/1190000010984731