前提:已经使用node安装好全局gulp。
1.创建package.json并配置
打开dos窗口,进入在项目文件,输入npm init,生成package.json文件,
{
"name": "项目文件名",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2.安装gulp
dos窗口输入npm(cnpm) install gulp --save-dev
3.安装插件
常用插件:gulp-uglify (JS压缩),gulp-minify-css(CSS压缩),gulp-minify-html(html压缩),gulp-jshint(JS代码检查),gulp-concat(文件合并),gulp-less(编译Less),gulp-sass(编译Sass),gulp-imagemin(压缩图片),gulp-rename(文件重命名,主要配合压缩插件使用)等
安装方法:npm(cnpm) install 插件名 --save-dev
安装完成后打开package.json文件可以看到配置变化
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0"
}
}
4.创建gulpfile.js文件,这个很重要,目前写的所有的gulp的内容都在这个js里
(1)加载插件
var gulp=require("gulp") 必需;
var sass=require("gulp-sass"); 用哪个加载哪个(以sass为例)
(2)使用插件
gulp的API介绍
(这里只写一些常用的概念,详细的请看http://www.gulpjs.com.cn/docs/api/)
gulp.task(name,[deps], fn)---定义一个任务,name为任务名;[ deps]为一个任务列表数组,里边包含其他的任务名称,这些任务会在当前任务之前执行;fn为你要进行的操作,一般格式为function(){
gulp.src()
.pipe(someplugin())
}
gulp.src(globs[, options]),表示输出所有匹配的文件,例:gulp.src("styles/*.css"),匹配文件夹下所有的css后缀的文件;
gulp.dest(path[, options]),表示对文件操作完成之后将要输入的位置,例:gulp.dest("minCss/"),将文件放入minCss文件夹内,如果没有,则自动创建一个该文件夹;
gulp.watch(glob[, opts, cb]),表示监听一些文件,并在文件有改动是进行一些操作,例:gulp.watch("styles/*.scss",["sass"]),监听styles文件夹中的所有scss文件,如果发生变动,就执行名为sass的任务;
使用(以sass为例)
gulp.task("sass",function(){
gulp.src("styles/*.scss") //输出styles文件夹里的所有scss文件
.pipe(sass()) //执行sass插件
.pipe(gulp.dest("styles/css")); //将文件输入到styles/css文件夹中
})
gulp.task("default",function(){
gulp.start("sass"); //运行sass任务
gulp.watch("styles/*.scss",["sass"]); //监听文件变动
});
在dos窗口中输入gulp,会自动运行default任务。
基本使用方法就是这样,刚刚接触gulp,做做笔记,加深印象。别说,效果还挺好。