gulp的使用 - 码农教程

引言

gulp是用于前端自动化构建的，方便前端进行即时开发的工具

自动化构建所需的插件

在项目路径下使用 npm init初始化之后，将下面需要安装的依赖复制到package.json文件中

"devDependencies": {
    "browser-sync": "^2.24.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-cache": "^1.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-concat-folders": "^1.3.1",
    "gulp-connect": "^5.5.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^4.1.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.0",
    "path": "^0.12.7"
  }

如图：

在复制到package.json文件中后，使用npm install命令，npm会下载devDependencies中对应版本号的依赖文件，这里只是完成了本地的安装，此时如果运行 gulp命令可能会报一些错误，大概率是因为没有安装对应全局的插件，或者本地安装的插件和全局安装的版本号不一致

如果没有安装对应全局和本地的插件，则使用命令安装(以版本号2.24.4的browser-sync为例)

npm install browser-sync@2.24.4 -g

本地安装

npm install browser-sync@2.24.4 --save-dev

如果安装了全局插件报错，可能因为本地和全局插件的版本号不一致，卸载重装插件试试

npm uninstall browser-sync npm install browser-sync@2.24.4 -g npm install browser-sync@2.24.4 --save-dev

gulp监听任务

依赖包引用

var gulp=require('gulp');
var cssnano=require('gulp-cssnano');
var rename=require('gulp-rename');
var uglify=require('gulp-uglify');
var concat=require('gulp-concat');
var cache=require('gulp-cache');
var imagemin=require('gulp-imagemin');
var bs=require('browser-sync').create();
var sass=require('gulp-sass');

监听任务

工程目录如图：

var paths=
{
	"html":"./templates/**/",
	"css":'./src/css/',
	"js":'./src/js/*.js',
	"images":'./src/images/',
	"css_dist":'./dist/css/',
	"js_dist":'./dist/js/',
	"images_dist":'./dist/images/'
};


//监听处理html任务
gulp.task('html',function(){
	gulp.src(paths.html+"*.html")
	.pipe(bs.stream());
});
//监听处理css的任务
gulp.task('css',function(){
	gulp.src(paths.css+"*.scss")
	.pipe(sass().on('error',sass.logError))
	.pipe(cssnano())
	.pipe(rename({'suffix':'.min'}))
	.pipe(gulp.dest(paths.css_dist))
	.pipe(bs.stream());
});

//监听处理js的文件任务
gulp.task('js',function(){
	gulp.src(paths.js+"*.js")
	.pipe(uglify())
	.pipe(gulp.dest(paths.images_dist))
	.pipe(bs.stream());
});

//监听处理图片文件的任务
gulp.task('images',function(){
	gulp.src(paths.images,"*.*")
	.pipe(cache(imagemin()))
	.pipe(gulp.dest(paths.images_dist))
	.pipe(bs.stream());
});

//舰艇文件修改任务
gulp.task('watch',function(){
	gulp.watch(paths.html+"*.html",['html']);
	gulp.watch(paths.css+"*.scss",['css']);
	gulp.watch(paths.js+"*.js",['js']);
	gulp.watch(paths.images+"*.*",['images']);
});

//初始化browser-sync的任务
gulp.task('bs',function(){
	bs.init({
		'server':
		{
			'baseDir':"./"
		}
	});
});

//创建一个默认的任务
gulp.task('default',['bs','watch']);

使用gulp命令开启default默认任务之后，此时更改src下任何一个文件内容，就会看到网页内容的更新