使用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

上一篇:roarctf_2019_easy_pwn


下一篇:2