Gulp 构建项目

1、安装node.js

安装完成之后打开cmd，输入npm -v 出现版本号即安装成功

为什么安装node之后就会有npm呢？

node.js是JavaScript 的一种运行环境，是对Google V8引擎运行的封存，是一个服务器端的JavaScript的解析器。

nodejs中包含了npm，npm是nodejs的包管理器（package manage），我们在node.js上开发时，会用到很多人写已经写好的JavaScript代码，

如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦，于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上，如果要用到某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来，试想如果这些工作全靠我们自己去完成会是多么麻烦。

2、全局安装gulp

npm install gulp -g  npm install gulp-cli -g

3、创建本地项目

创建本地项目之前，需要先初始化一个仓库

npm init

注意：这里的entry point：需要定义为gulpfile.js，因为控制台输入gulp的时候会首先去寻找gulpfile.js文件，如果这里定义为index.js，后面也必须新建一个gulpfile.js文件

初始化时，你可以设置默认值，不想设置的，直接一路回车即可，之后会在根目录下自动创建一个package.json文件，这个文件是用来存放即将安装的插件的name和version。

4、设计项目目录结构

5、安装各种插件

npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch gulp-watch-path stream-combiner2  gulp-clean gulp-file-include gulp-font-spider gulp-htmlmin gulp-relpace gulp-rev gulp-rev-collector gulp-run-sequence gulp-webserver  --save-dev

gulp --本地gulp

gulp-imagemin -- 图片压缩

gulp-minify-css -- css压缩

gulp-uglify --压缩

gulp-util --控制台代码着色

gul-watch --监听新增的HTML，不用每次新增文件都要执行命令来重新启动服务

gulp-watch-path --文件很多时编辑那个，压缩那个，不会全部压缩，（获取改变的文件的src和dest路径）

stream-combiner2 --有些gulp任务编译出错会终止gulp.watch，使用gulp-watch-combiner2可避免这种情况

gulp-clean --清除文件，文件夹

gulp-include --使用include引入其他文件比如引入公共的头部和公共的底部

gulp-font-spider --字体压缩

gulp-htmlmin --html压缩

gulp-replace --替换目标文件中的文本

gulp-rev，gulp-rev-collector --为静态文件添加一串hash值，解决cdn缓存问题

gulp-run-sequence --按顺序执行task

gulp-webserver --用来开启服务

--save-dev 这个命令是将安装的插件信息写入package.json文件内的“devDependencies”属性内，这个是开发环境所需要的依赖

6、编写gulpfile.js文件，引入模块

const Gulp = require('gulp'); 

const Minifycss = require('gulp-minify-css'); 

const Uglify = require('gulp-uglify'); 

const FileInclude = require('gulp-file-include'); 

const Watch = require('gulp-watch'); 

const WebServer = require('gulp-webserver');

const RunSequence = require('gulp-run-sequence'); 

const Clean = require('gulp-clean');

const rev = require('gulp-rev'); 

const revCollector = require('gulp-rev-collector'); 

const htmlmin = require('gulp-htmlmin'); 

const Dist = 'dist/home';

const replace = require('gulp-replace'); 

const imgMin = require('gulp-imagemin'); 

const autoprefixer = require('gulp-autoprefixer'); 

var fontSpider = require('gulp-font-spider');

7、gulp的使用

gulp一共有5个方法

gulp.task() --新建任务

gulp.src() -- 获取文件源地址

gulp.dest() --文件输出地址

gulp.run() --运行任务

8、创建gulp任务

// 定义一个copy-html 任务（自定义任务名称）
Gulp.task('copy-html', function(){
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    return Gulp.src(['./rev/**/*.json', 'src/view/*.html']) //该任务针对的文件
            .pipe(FileInclude({
                prefix: '##',
                basepath: '@file'
            }))
            .pipe(revCollector({
                replaceReved: true,
            }))
            .pipe(replace("../", "./"))
            .pipe(htmlmin(options))
            .pipe(fontSpider())
            .pipe(Gulp.dest(Dist));
})

Gulp.task('copy-js',()=>{
    return Gulp.src('src/js/**')
            .pipe(rev())
            .pipe(Uglify())
            .pipe(Gulp.dest(Dist + '/js'))
            .pipe(rev.manifest())
            .pipe(Gulp.dest('./rev/js')) // 将会在src/css下生成js
})

Gulp.task('copy-font', () => {
    return Gulp.src('src/font/**').pipe(Gulp.dest(Dist + '/font'))
})

Gulp.task('copy-data', () => {
    return Gulp.src('src/data/**').pipe(Gulp.dest(Dist + '/data'))
})

// 打包压缩css
Gulp.task('copy-css', ()=>{
    return Gulp.src('src/css/**')
            .pipe(autoprefixer({
                overrideBrowserslist: ["Android 4.1",
                    "IOS 7.1",
                    "Chrome > 31",
                    "ff > 31",
                    "ie >= 8"],
                    cascade: true, //是否美化属性值 默认：true 像这样
                    remove: true // 是否去掉不必要的前缀 默认 ：true
            }))
            .pipe(rev())
            .pipe(Minifycss())
            .pipe(Gulp.dest(Dist + '/css'))
            .pipe(rev.manifest())
            .pipe(Gulp.dest('./rev/css'))
})

Gulp.task('copy-images', () => {
    return Gulp.src('src/images/**')
            .pipe(imgMin({
                optimizationLevel: 5,
                progressive: true,
                interlaced: true,
                multipass: true
            }))
            .pipe(Gulp.dest(Dist+ '/images'))
})

Gulp.task("update-css", ()=>{
    RunSequence('copy-css','copy-html')
})

Gulp.task("update-js", ()=>{
    RunSequence('copy-js','copy-html')
})

Gulp.task("update-font", ()=>{
    RunSequence('copy-font','copy-html')
})

Gulp.task("update-images", ()=>{
    RunSequence('copy-images','copy-html')
})

Gulp.task("update-data", ()=>{
    RunSequence('copy-data','copy-html')
})

Gulp.task('watch', () => {
    Gulp.watch('src/common/*', ['copy-html']);
    Gulp.watch('src/view/*',['copy-heml']);
    Gulp.watch('src/js/**',['update-js']);
    Gulp.watch('src/css/**',['update-css']);
    Gulp.watch('src/font/*',['update-font']);
    Gulp.watch('src/images/*',['update-images']);
    Gulp.watch('src/data/*',['update-data'])
})

Gulp.task('web-server', () => {
    return Gulp.src(Dist).pipe(WebServer({
        port: 8882,
        host: '127.0.0.1',
        livereload: true,
        open: 'http://127.0.0.1:8882/index.html'
    }))
})

Gulp.task('clean', () => {
    return Gulp.src(Dist).pipe(Clean());
})

//生产环境
Gulp.task('dev', () => {
    RunSequence('clean',
                ['copy-css','copy-js','copy-font','copy-images','copy-data','watch'],
                'copy-html',
                'web-server'); 
    // RunSequence 是用来设置任务串行执行，因为有些任务是有先后顺序依赖，[]内的并行执行，()内的串行执行
})

Gulp.task('start', () => {
    RunSequence('watch','web-server');
})

//开发环境
Gulp.task('builds', () => {
    RunSequence('clean',
                ['copy-css','copy-js','copy-font','copy-images','copy-data'],
                'copy-html',
                'quit');
    // RunSequence 是用来设置任务串行执行，因为有些任务有先后顺序依赖， []内的并行执行，()内的串行执行
})

Gulp.task('quit', () => {
    process.exit();
})

Gulp.task('default', ['start'])

9、package.json 文件

"dependencies": {
    "braces": "^2.3.1",
    "gulp-autoprefixer": "^6.1.0",
    "npm": "^6.11.3"
  },
  "devDependencies": {
    "clean-css": "^4.2.1",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.4.0",
    "gulp-file-include": "^2.0.1",
    "gulp-font-spider": "^0.3.6",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^4.0.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-replace": "^1.0.0",
    "gulp-rev": "^9.0.0",
    "gulp-rev-collector": "^1.3.1",
    "gulp-run-sequence": "^0.3.2",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^5.0.0",
    "gulp-webserver": "^0.9.1",
    "run-sequence": "^2.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "gulp",
    "dev": "gulp dev",
    "build": "gulp builds"
  },

执行命令npm run dev 或者 gulp dev

posted @ 2019-11-26 15:20 xuewy 阅读(232) 评论(0) 收藏举报

刷新页面返回顶部

薛武英

程序不是年轻的专利，但是，他属于年轻。