前提：已经使用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，做做笔记，加深印象。别说，效果还挺好。
网友评论