Gulp前端构建工具

素颜马尾好姑娘i 2022-06-17 04:00 305阅读 0赞

## 安装介绍 ##

### 1.全局安装gulp ###

npm install --global gulp

### 2. 作为项目的开发依赖（devDependencies）安装：(在项目根目录操作) ###

npm install --save-dev gulp

### 3.在项目根目录创建一个gulpfile.js文件（此文件名不可更改） ###

### 4.初始化生成package.json (可以先用默认配置) ###

npm init

--------------------

> 接下来就是安装各种组件了。。。 官网搜索安装就行  
> gulp官网：[http://www.gulpjs.com.cn/][http_www.gulpjs.com.cn]  
> npm组件官网：[https://www.npmjs.com/][https_www.npmjs.com]

### 下面提供一个常用的配置(仅供参考)： ###

> package.json

{
      "name": "qmcz",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "dependencies": { "gulp": "^3.9.1" },
      "devDependencies": { "gulp-autoprefixer": "^3.1.1", "gulp-clean": "^0.3.2", "gulp-clean-css": "^2.0.13", "gulp-concat": "^2.6.0", "gulp-connect": "^5.0.0", "gulp-inject": "^4.1.0", "gulp-less": "^3.1.0", "gulp-manifest": "^0.1.1", "gulp-rev": "^7.1.2", "gulp-sequence": "^0.4.6", "gulp-uglify": "^2.0.0", "gulp-watch": "^4.3.10" },
      "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
      "author": "",
      "license": "ISC" }

> gulpfile.js

var gulp = require('gulp');  // 基础库
    var less = require('gulp-less');  // less编译成css
    var autoprefixer = require('gulp-autoprefixer');  // 兼容代码自动补全
    var cleanCss = require('gulp-clean-css');  // css代码压缩
    var concat = require('gulp-concat');  // 代码合并
    var uglify = require('gulp-uglify');  // js代码压缩
    var watch = require('gulp-watch');  // 监听
    var connect = require('gulp-connect'); // 构建本地服务
    
    // 解决浏览器缓存问题，增强用户体验
    var rev = require('gulp-rev');  // 以md5方法重命名文件
    var manifest = require('gulp-manifest'); // 用json文件保存文件名
    var inject = require('gulp-inject'); // 更换html文件引用路径
    var clean = require('gulp-clean');  // 删除文件
    var sequence = require('gulp-sequence'); // 保证文件执行顺序
    
    gulp.task('less',function(){ 
        return gulp.src(['view/*.less'])
            .pipe(less())
            .pipe(autoprefixer({
                browsers: ['last 20 versions'],
                cascade: true
            }))
            .pipe(cleanCss())
            .pipe(concat('index.min.css'))
            .pipe(gulp.dest('dist/'))
    });
    
    
    gulp.task('js',function(){ 
        return gulp.src(['config/config.js','controller/*Controller.js'])
            .pipe(uglify())
            .pipe(concat('index.min.js'))
            .pipe(gulp.dest('dist/'))
    });
    
    gulp.task('mywatch',function(){ 
        // gulp.watch('view/*.less').on('change',function(e){ 
        // console.log("less编译"+e.path);
        // });
        gulp.watch(['view/*.less'],['less']);
        gulp.watch(['config/config.js','controller/*Controller.js'],['js']);
    });
    
    gulp.task('localhost',function(){ 
        return connect.server({
            root: '',  //静态资源目录
            port: 8000
        });
    });
    
    // 解决浏览器缓存
    gulp.task('rev',function(){ 
        return gulp.src(['dist/index.min.css','dist/index.min.js'])
            .pipe(rev())
            .pipe(gulp.dest('dist/'))
            .pipe(rev.manifest())
            .pipe(gulp.dest('dist/'));
    });
    
    gulp.task('inject',function(){ 
        return gulp.src('index.html')
            .pipe( inject( gulp.src(['dist/index-*.min.css','dist/index-*.min.js']) ))
            .pipe( gulp.dest('') );
    });
    
    gulp.task('clean',function(){ 
        return gulp.src('dist/index-*.min.*')
            .pipe( clean());
    });
    
    gulp.task('build',function(cb){ 
        return sequence('clean','rev','inject',cb);
    });
    
    gulp.task('default',['mywatch','localhost']);

[http_www.gulpjs.com.cn]: http://www.gulpjs.com.cn/
[https_www.npmjs.com]: https://www.npmjs.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，305人围观）

还没有评论，来说两句吧...

相关阅读

相关前端构建工具gulp入门教程

本文假设你之前没有用过任何任务脚本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其实很简单，我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。

浅浅的花香味﹌/ 2022年08月23日 01:00/ 0 赞/ 232 阅读

相关前端开发入门：前端构建工具gulp入门教程

1、什么是Gulp > [gulp.js][] 是一种基于流的，代码优于配置的新一代构建工具。 > > `Gulp` 和 `Grunt` 类似。但相比于 `Grunt`

迈不过友情╰/ 2022年08月19日 02:17/ 0 赞/ 235 阅读

相关前端工程的构建工具gulp

现在前端构建工具主要有grunt、gulp，这里主要讲解gulp，之所选择gulp，是因为gulp有以下极大优点 1、易于使用：采用代码优于配置策略，Gulp让简单的事情继续

亦凉/ 2022年07月17日 00:28/ 0 赞/ 203 阅读

相关浅谈前端构建工具gulp

1、gulp gulp是一个前端自动化的构建工具，采用这个工具，可以提升性能和效率。 2、为什么要用gulp 1) .js和.css属于静态文件，由于浏览器存在缓存

我会带着你远行/ 2022年06月18日 05:28/ 0 赞/ 244 阅读

相关 Gulp前端构建工具

安装介绍 1.全局安装gulp npm install --global gulp 2. 作为项目的开发依赖（devDependencies）安装：(在

素颜马尾好姑娘i/ 2022年06月17日 04:00/ 0 赞/ 306 阅读

相关 Gulp前端自动化工具

Gulp 当下的前端开发不再是简简单单的使用HTML+CSS+JavaScript这些简单的技术构建网页应用程序了我们要提高效率，就必须减少重复的工

傷城~/ 2022年06月13日 09:13/ 0 赞/ 244 阅读

相关 Gulp 前端构建工具

基于流 1. 安装 2. 使用 3. API 4. 常用 gulp 插件基于流 Gulp是以 Nodejs中的stream(流) 为媒介

柔光的暖阳◎/ 2022年05月26日 09:48/ 0 赞/ 217 阅读

相关前端自动化构建工具——gulp

操作过程：需要配置文件后才能执行 $ gulp命令（1）配置一些基本信息，执行命令：$ npm init 在git指令中，对下面每一项进行配置，注意：GitHub项目

一时失言乱红尘/ 2022年05月09日 11:24/ 0 赞/ 281 阅读

相关前端构建工具------Webpack vs Gulp

理想的前端开发流程在说构建工具之前得先说说咱期望的前端开发流程是怎样的？写业务逻辑代码（例如 es6，scss，pug 等）处理成浏览器认识的（js，

逃离我推掉我的手/ 2022年04月18日 02:50/ 0 赞/ 276 阅读

相关 gulp自动化构建工具

目录 gulp是什么？ gulp安装 gulp API gulp.src(globs\[, options\]) gulp.dest(path\[, options\

末蓝、/ 2022年01月21日 06:41/ 0 赞/ 334 阅读