使用Gulp实现前端构建自动化

使用Gulp实现前端构建自动化

安装

一.安装NodeJs

Gulp的安装依赖于NodeJs的npm安装管理器

安装包下载地址

关于npm命令:

1. npm install <name>
		会把插件安装到node_modules目录中
2. 参数 --save
		会在package.json的dependencies属性下添加该插件
3. 参数 --save-dev:
		会在package.json的devDependencies属性下添加添加该插件
4. 参数 -g
		全局安装插件
4. npm install
	会安装package.json下dependencies和 devDependencies声明的插件
5. 使用原则:
	运行时需要用到的包使用--save，否则使用--save-dev。

二.安装Gulp

1. 执行 npm init 初始化package.json ————便于共同开发时安装插件
2. 执行 npm install -save gulp

三.Gulp的使用

1.在项目根目录下创建一个gulpfile.js文件

2.在gulpfile.js文件下引入gulp

var gulp = require('gulp');

3.创建默认任务

//执行 gulp 会默认执行该任务
gulp.task('default', function() {

});

4.文件移动指令

//目标文件
gulp.task('movecss', function() {
	gulp.src('*.css')//指定源文件
	.pipe(
		gulp.dest('minicss')//输出到指定的目录 若该目录不存在会自动创建
	);
});

5.监听文件变化执行一些操作

//目标文件
gulp.task('watchjs', function() {
	gulp.watch('main.js', function(event) {
		console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
	});
});

6.在一个task下引用其他task

//多个task
gulp.task('tasks', ['movecss','watchjs'], function() {
	console.log('last task');
});

//会按顺序执行
gulp.task('default', ['movecss', 'watchjs']);

四.常用插件

1.压缩CSS---gulp-minify-css

安装:

npm install gulp-minify-css --save-dev

用法:

//引入gulp-minify-css
var cssminify = require('gulp-minify-css');
//压缩css 并移动到指定的文件夹
gulp.task('cssmin', function () {
    gulp.src('*.css')
        .pipe(cssminify())
        .pipe(gulp.dest('minicss'));
});

2.压缩js---gulp-minify

安装:

npm install --save-dev gulp-minify

用法:

//压缩js
gulp.task('compress', function () {
    gulp.src('*.js')
        .pipe(minify({
	        ext:{
	            src:'-debug.js',//源文件的扩展名
	            min:'-min.js'	//压缩过的文件的扩展名
	        },
	        exclude: ['folder'], //排除的目录
	        ignoreFiles: ['gulpfile.js'] //不压缩的文件
	    }))
	    .pipe(gulp.dest('minijs'))
});

3.gulp-clean

安装:

npm install --save-dev gulp-clean

用法:

//清除文件
gulp.task('clean-mini-js', function () {
    return gulp.src('minijs', {read: false})
        .pipe(clean());
});

其他常用插件

• gulp-manifest
• run-sequence
• gulp-exec
• gulp-css-urls
• gulp-minify-css
• gulp-htmlmin
• gulp-imagemin
• gulp-uglify
• gulp-concat
• gulp-rename

Github--本文代码

参考链接:

加速npm install 方法

Gulp中文网

npm 安装相关知识

gulp-minify-css

gulp-minify

gulp-clean