现在的前端已经不是那几年的前端了 要跟上时代的潮流 所以这几天就学习了下前端工程化中的自动化构造Gulp 但是由于目前公司并没有明确提出前端工程化这个概念 所以也只是掌握了皮毛 但为了防止遗忘 so 记录下来Gulp基础 方便后面来看 在这期间也借鉴了网上其他网友的方法
Gulp概念
Gulp是可以自动化执行任务的工具,在平时开发的流程里面,有一些动作是重复要去做的,比如压缩html,js,css,图片等等,一般就可以把这些动作创建成一个gulp任务,让它自动去之执行这些任务。期间gulp利用了nodejs的流概念,可以快速构建项目并减少频繁的IO操作,前一级的输出,直接变成后一级的输入,类似于jQuery中的链式操作,jQuery中返回的当前this对象,而gulp中返回的是nodejs对各种对象实现的抽象接口。Gulp安装
①首先确保你已经安装了node环境
②再全局安装gulpnpm install -g gulp
③切换到你的项目目录下面 项目安装gulp(这里用npm安装可能会报错 所以切换至淘宝的cnpm安装)cnpm install --save-dev gulp
④创建项目描述文件package.json
npm,需要一个package.json的文件来管理依赖,可以手动创建该文件也可以使用npm init命令创建npm init
但需要输入一些配置。
name:项目名称
version:项目版本号
description:项目说明
entry point:入门文件 当npm start的时候会执行此文件
test command:测试脚本 当npm test的时候会执行此文件
git repository:模块的git仓库
keywords:在npmjs官网搜索时的关键字
author:项目作者的名字
license:授权协议Gulp使用
①在项目应用的根目录下面创建一个名叫gulpfile.js文件 所有的gulp自动化任务都写在这里面②gulp提供的API需要关键掌握的就是:
gulp.task()、gulp.src()、gulp.dest()、gulp.watch()
③
gulp.task(name[,deps],fn)
该方法用来定义任务,name为任务名,deps是定义当前任务需要依赖的任务,当前定义的任务会在所依赖的任务完成后才开始执行,fn为定义任务执行动作。④
gulp.src(globs[,options])
该方法用来引入nodejs中的stream流,然后通过stream的pipe()方法把流导入到你想要的地方,比如在gulp中就经常导入到插件中,当然流也可以写入到文件中。globs为文件匹配模式类似正则表达式,用来匹配文件路径包括文件名,当有多个匹配模式时,可以是一个数组;options为可选参数,一般使用不到。⑤
gulp.dest(path[,options])
该方法是用来写文件的,path为写入文件的路径,options为可选参数,一般使用不到。⑥
gulp.watch(glob[,opts],tasks)
该方法是用来监视文件的变化,当文件发生了,可以执行相应的任务执行。glob为文件匹配模式;opts可选配置对象,一般使用不到;tasks为文件变化后要执行的任务,为一个数组。具体实例
①压缩js文件 需要包依赖 gulp-uglifynpm i --save-dev gulp-uglify
let gulp = require('gulp');
let uglify = require('gulp-uglify');
gulp.task('minifyJS',function(){
return gulp.src('./Home/js/*.js').
pipe(uglify())./*调用插件处理js*/
pipe(gulp.dest('dist/js'))/*处理好的文件写入dist文件夹js目录下*/
}) ;
gulp.task('default',['minifyJS']);
在当前项目的命令行中键入 gulp
②压缩css文件 需包依赖gulp-minify-css npm i --save-dev gulp-minify-css
let gulp = require('gulp');
let minifyCSS = require('gulp-minify-css');
gulp.task('minifyCSS ',function(){
return gulp.src('./Home/css/*.css').
pipe(minifyCSS ())./*调用插件处理css*/
pipe(gulp.dest('dist/css'))/*处理好的文件写入dist文件夹css目录下*/
}) ;
gulp.task('default',['minifyCSS ']);
在当前项目的命令行中键入 gulp
③压缩html文件 需要包依赖 gulp-htmlmin npm i --save-dev gulp-htmlmin
let gulp = require('gulp');
const htmlMin = require('gulp-htmlmin');
gulp.task('htmlMin', function () {
var options = {
collapseWhitespace: true, //清除空格
collapseBooleanAttributes: true, //省略布尔值属性的值比如:<input checked="checked"/>,那么设置这个属性后,就会变成 <input checked/>;
removeComments: true,//清除html页面中的注释
removeEmptyAttributes: true,//清除所有的空属性
removeScriptTypeAttributes: true,//清除所有script标签中的type="text/javascript"属性
removeStyleLinkTypeAttributes: true,//清除所有link标签上的type属性
minifyJS: true,//压缩js
minifyCSS: true//压缩css
};
return gulp.src('./Home/templatehandle.html').
pipe(htmlMin(options)).
pipe(gulp.dest('dist'))
});
gulp.task('default',['htmlMin']);
在当前项目的命令行中键入 gulp
④压缩图片 需要包依赖 gulp-imagemin npm i --save-dev gulp-imagemin
let gulp = require('gulp');
const imgMin = require('gulp-imagemin');
gulp.task('imgMin',function(){
return gulp.src('./Home/imgs/*.png').
pipe(imgMin()).
pipe(gulp.dest('dist/imgs'))
});
gulp.task('default',['imgMin']);
在当前项目的命令行中键入 gulp
⑤压缩png格式图片 需要包依赖imagemin-pngquant和④中的插件 npm i --save-dev imagemin-pngquant
let gulp = require('gulp');
const imgMin = require('gulp-imagemin');
const imgPngMin = require('imagemin-pngquant');
gulp.task('imgMin',function(){
return gulp.src('./Home/imgs/*.png').
pipe(imgMin({
progressive: true,
use: [imgPngMin()]
})).
pipe(gulp.dest('dist/imgs'))
});
gulp.task('default',['imgMin']);
在当前项目的命令行中键入 gulp
⑥js语法检测 需要包依赖gulp-jshint npm i --save-dev gulp-jshint
但是我当时尝试这样写报错 所以应该键入 npm install --save-dev jshint gulp-jshint 才正确
let gulp = require('gulp');
const jsHint = require('gulp-jshint');
gulp.task('jsHint',function(){
gulp.src('./Home/js/templatehandle.js').
pipe(jsHint()).
pipe(jsHint.reporter())
});
gulp.task('default',['jsHint']);
在当前项目的命令行中键入 gulp
⑦动态刷新浏览器 需要包依赖browser-sync npm i --save-dev browser-sync
let gulp = require('gulp');
let browser = require('browser-sync').create();
gulp.task('noFlash',function(){
browser.init({
files:['./noFlash.html','./noFlash.css','./testProj.html','./testProj.css'],/*需要监听的文件*/
server:{
baseDir:'./Home'/*服务基础目录*/
}
})
gulp.watch("./Home/*.html").on('change', browser.reload);/*发生改变 则执行刷新*/
gulp.watch("./Home/*.css").on('change', browser.reload);/*发生改变 则执行刷新*/
})
gulp.task('default',['noFlash']);
在当前项目的命令行中键入 gulp
⑧合并且压缩js文件组合使用 需要包依赖gulp-concat || gulp-uglify npm i --save-dev gulp-concat
let gulp = require('gulp');
let concat = require('gulp-concat');
let minifyJS = require('gulp-uglify');
gulp.task('concat',function(){
return gulp.src(['./Home/js/templatehandle.js','./Home/js/mc_js.js']).
pipe(concat('test.js')).
pipe(gulp.dest('dist'))
})
gulp.task('minifyJS',['concat'],function(){
return gulp.src('./dist/test.js').
pipe(minifyJS()).
pipe(gulp.dest('dist'))
})
gulp.task('default',['minifyJS'])
在当前项目的命令行中键入 gulp
暂时写到这里 其实这里只是简略的介绍了gulp的使用 还有更多的细节需要切把控 然后还有一点没谈到的是如何在项目中加入使用gulp 前面说了由于公司项目没有采取自动化工程 所以我体会也不大 具体可以参考网上其他网友的文章