前端自动化之gulp

关键词：

前题：1.安装好nodejs环境，或者nvm

　　　2.安装npm包管理工具

简介：

 可以自动的将开发阶段的代码进行压缩、合并、编译、加密等处理，生成项目提交的代码。

使用：

gulpfile.js文件编写的api较少，只有5个，可查看api自行编写。

http://www.gulpjs.com.cn/docs/api/

用npm下载gulp插件：

    "browser-sync": "^2.18.13",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-htmlmin": "^3.0.0",
    "gulp-less": "^3.3.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.0"

编写gulp任务：

gulpfile.js文件案例：

‘use strict‘;

// 载入Gulp模块
var gulp = require(‘gulp‘);
var less = require(‘gulp-less‘);/*less编译*/
var autoprefixer = require(‘gulp-autoprefixer‘);//给 CSS 增加前缀。解决某些CSS属性不是标准属性，有各种浏览器前缀的情况
var cssnano = require(‘gulp-cssnano‘);
var cssmin = require(‘gulp-minify-css‘);/*压缩css*/
var concat = require(‘gulp-concat‘);/*合并*/
var uglify = require(‘gulp-uglify‘);/*压缩混淆*/
var htmlmin = require(‘gulp-htmlmin‘);/*html压缩*/
var browserSync = require(‘browser-sync‘);/*网页自动刷新*/
var reload = browserSync.reload;

// 注册样式编译任务
gulp.task(‘css‘, function() {
    gulp.src(‘src/css/*.css‘)
        .pipe(concat(‘main.css‘)) //合并css
        .pipe(gulp.dest(‘dist/css‘))/*导出*/
        .pipe(reload({
            stream: true
        }));
});

// 注册脚本合并压缩任务
gulp.task(‘script‘, function() {
    gulp.src(‘src/scripts/*.js‘)
        .pipe(concat(‘app.js‘))
        .pipe(uglify())
        .pipe(gulp.dest(‘dist/scripts‘))
        .pipe(reload({
            stream: true
        }));
});

gulp.task(‘image‘, function() {
gulp.src(‘src/images/*.*‘)
    .pipe(gulp.dest(‘dist/images‘))
    .pipe(reload({
        stream: true
    }));
});

gulp.task(‘html‘, function() {
    gulp.src(‘src/*.html‘)
        .pipe(htmlmin({
            collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeAttributeQuotes: true,
            removeComments: true,
            removeEmptyAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
        }))
        .pipe(gulp.dest(‘dist‘))
        .pipe(reload({
            stream: true
        }));
});

gulp.task(‘serve‘, [‘css‘, ‘script‘, ‘image‘, ‘html‘], function() {
    browserSync({
        notify: false,
        port: 2015,
        server: {
            baseDir: [‘dist‘]
        }
    });
    gulp.watch(‘src/styles*//*.css‘, [‘css‘]);
    gulp.watch(‘src/scripts*//*.js‘, [‘script‘]);
    gulp.watch(‘src/images*//*.*‘, [‘image‘]);
    gulp.watch(‘src*//*.html‘, [‘html‘]);
});

/*
gulp.task(‘saaa‘,  function() {
    console.log(1111111)
});*/

View Code

可通过案例按照实际情况修改。

前端笔试题之什么是gulp

什么是gulp？　　　　官网中这样写道：gulp是自动化构建工具。虽然经常有在用gulp，看了之后还是懵懵的。看了一下别人的理解，这样说道：Gulp是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（... 查看详情

前端自动化之gulp

前题：1.安装好nodejs环境，或者nvm　　　2.安装npm包管理工具简介： 可以自动的将开发阶段的代码进行压缩、合并、编译、加密等处理，生成项目提交的代码。使用：gulpfile.js文件编写的api较少，只有5个，可查看api自行编写... 查看详情

前端自动化之项目搭建

1.先安装全局的gulp$npminstall--globalgulp2.npm初始化，在项目内创建package.json文件npminit3.项目文件路径下，将gulp安装到项目内。$npminstall--save-devgulp4.创建gulp主文件==》gulpfile.js 5.编写gulpfile.js测试代码：vargulp=require(‘gulp‘);gulp.ta 查看详情

前端自动化构建之gulp(代码片段)

...每次都是用脚手架搭好的文件，在无形中体验了一波前端自动化带来的方便。然后前一段时间才开始学习前端自动化。基本介绍gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载的一... 查看详情

gulp构建前端自动化工作流之：常用插件介绍及使用

在对Gulp有了一个初步的了解之后，我们开始构建一个较为完整的Gulp开发环境。本文主要分为6个段落：1.构建项目目录结构（DirectoryStructureBuild）2.插件介绍及使用方法（Tasksanddependencies）3.扩展优化（Extend&OptimizeTask）4.其他插... 查看详情

学写网站前端配置之glup(代码片段)

前端使用gulp来自动化开发流程。gulp会非常方便进行前端管理。安装gulp：npminstallgulp-g#将gulp安装至全局因为在本地需要使用require的方式gulp。因此也需要在本地安装一份：npminstallgulp--save-dev #将gulp安装至本地，并保存至package.... 查看详情

前端构建之--gulp(代码片段)

gulp相关插件：1、del删除文件，用于清空文件2、browser-sync用于自动刷新浏览器3、gulp-htmlmin用于压缩html4、gulp-clean-css压缩css5、gulp-uglify压缩js6、gulp-replace替换路径7、gulp-base64将小图背景图转换为base64的形式，可以自己设置最大多... 查看详情

前端小萌新必知必会之实现自定义gulp插件

...构建工具Gulp,并定制符合特定需求的Gulp插件。Gulp是一个自动化和增强工作流的工具包利用Gulp和JavaScript的灵活性来自动化缓慢、重复的工作流，并将它们组合成高效的构建管道。废话说完，接下来，都是干货啦！完全展开以后是... 查看详情

gulp的使用之gulpfile.js文件的配置

...么文件:gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且... 查看详情

用gulp构建你的前端项目

...如果还是人工去处理，效率非常之低且还容易出错，于是自动化的处理工具也就必然出现了。就像后端我们一般用maven管理项目，那么前端gulp是个不错的选择。 什么是gulp是一个基于Node.js流、Javascript语法的快速构建前端项目... 查看详情

前端自动化-----gulp详细入门(转)

...p;简介：gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且... 查看详情

前端工作流程自动化——grunt/gulp自动化

前端工作流程自动化——Grunt/Gulp自动化　　Grunt/Gulp都是node.js下的模块，简单来说是自动化任务运行器，两者都有社区及大量的插件支撑，在所有的自动化工具领域里，这两者是最好的前端自动化构建工具。　　那么问题来了，... 查看详情

gulp教程之：gulp能做什么，前端装逼为何要用它

我们先说说平时web开发遇到的一些场景和苦恼无奈的情况：JavaScript和CSS的版本问题我们都知道JavaScript和CSS属于静态文件，如果地址不变，浏览器会缓存这些文件，那就意味着当我们需要改JavaScript或者CSS文件的时候，即使我们后... 查看详情

玩转gulp之压缩打包热重载

...然后保存，自动编译，就好像我们在写css一样，这是一个自动化的一大步。我们呱唧呱唧。我们已经会用了gulp的srcdestwatchpipetask这五个主要的方法，这些方法可以用来完成所有的任务了。没错是所有我们还知道了用插件去增加gul... 查看详情

gulp前端自动化工具的使用&&yarn

1、全局安装gulp        cnpminstallgulp-g 2、如果需要使用gulp的时候         a、cnpminit   初始化仓库 后面加-y  查看详情

使用gulp自动化打包合并前端静态资源（cssjs文件压缩添加版本号）

现在正在做的项目更新迭代比较频繁，会经常对前端代码打包部署，手动整合代码文件很麻烦并且浪费时间，所以决定使用gulp来代替手工完成这项工作。前端静态资源在发版更新时会面临客户端浏览器缓存的问题（可参考这篇... 查看详情

gulp是什么？

...　gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大... 查看详情

如何选择javascript构建工具之babelbrowserifywebpackgrunt以及gulp(代码片段)

...Webpack能够打包JavaScript文件以及其相关的依赖使用Gulp能够自动化地将文件批量重命名，从而刷新静态资源文件的缓存那么，问题来了，前端构建工具那么多，为什么我偏偏推荐上述的这些呢？追根溯源我对很多流行的JavaScript构... 查看详情