gulp 订阅
GULP最初设计的目的是拟合力场,已经逐步发展成为模拟凝聚态物质的通用代码,可以模拟无机固体、团聚体、缺陷、表面、界面以及聚合物等。 展开全文
GULP最初设计的目的是拟合力场,已经逐步发展成为模拟凝聚态物质的通用代码,可以模拟无机固体、团聚体、缺陷、表面、界面以及聚合物等。
信息
外文名
General Utility Lattice Program
模拟的类型
(各维的都能模拟)
中文名
gulp
能量最小化
GULP里面比较出色的
gulpQuench your thirst for knowledge
At Google our mission is to organize the world's information and make it useful and accessible to our users. But any piece of information's usefulness derives, to a depressing degree, from the cognitive ability of the user who's using it. That's why we're pleased to announce Google Gulp (BETA)™ with Auto-Drink™ (LIMITED RELEASE), a line of "smart drinks" designed to maximize your surfing efficiency by making you more intelligent, and less thirsty.Think fruity. Think refreshing.Think a DNA scanner embedded in the lip of your bottle reading all 3 gigabytes of your base pair genetic data in a fraction of a second, fine-tuning your individual hormonal cocktail in real time using our patented Auto-Drink™ technology, and slamming a truckload of electrolytic neurotransmitter smart-drug stimulants past the blood-brain barrier to achieve maximum optimization of your soon-to-be-grateful cerebral cortex. Plus, it's low in carbs! And with flavors ranging from Beta Carroty to Glutamate Grape, you'll never run out of ways to quench your thirst for knowledge.How to get Gulped?You can pick up your own supply of this "limited release" product simply by turning in a used Gulp Cap at your local grocery store. How to get a Gulp Cap? Well, if you know someone who's already been "gulped," they can give you one. And if you don't know anyone who can give you one, don't worry – that just means you aren't cool. But very, very (very!) soon, you will be.
收起全文
精华内容
下载资源
问答
  • Gulp

    2021-01-10 11:30:52
    gulp能干什么 项目上线,HTML、CSS、JS文件压缩合并 语法转换(es6、less …) 公共文件抽离 修改文件浏览器自动刷新 gulp的使用 1.使用npm install gulp下载gulp库文件 2.在项目根目录下建立gulpfile.js文件 3....

    gulp能干什么

    • 项目上线,HTML、CSS、JS文件压缩合并
    • 语法转换(es6、less …)
    • 公共文件抽离
    • 修改文件浏览器自动刷新

    gulp的使用

    1.使用npm install gulp下载gulp库文件

    2.在项目根目录下建立gulpfile.js文件

    3.重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件

    4.在gulpfile.js文件中编写任务.

    5.在命令行工具中执行gulp任务

    gulpfile.js:

    // 导入gulp
    const gulp = require('gulp')
    // 建立gulp任务
    // 参数
    // 1.任务名称
    // 2.回调函数
    gulp.task('first', () => {
        // 要处理的文件
        gulp.src('./src/css/base.css')
            // 输出的路径
            .pipe(gulp.dest('./dist/css'))
    })
    

    命令行工具中执行gulp任务: gulp first (下载gulp-cli)

    gulp中的方法

    • gulp.src():获取任务要处理的文件
    • gulp.dest():输出文件
    • gulp.task():建立gulp任务
    • gulp.watch():监控文件的变化

    gulp插件

    • gulp-htmlmin :html文件压缩
    • gulp-csso :压缩css
    • gulp-babel :JavaScript语法转化
    • gulp-less: less语法转化
    • gulp-uglify :压缩混淆JavaScript
    • gulp-file-include 公共文件包含
    • browsersync 浏览器实时同步

    html公共部分抽离压缩

    //导入htmlmin
    const htmlmin = require('gulp-htmlmin');
    // 导入include-file
    const include_file = require('gulp-include-file');
    // 创建任务
    gulp.task('htmlmin', () => {
        gulp.src('./src/*.html')
            .pipe(include_file())
            // 进行压缩
            .pipe(htmlmin({ collapseWhitespace: true }))
            .pipe(gulp.dest('./dist'))
    })
    

    在html中引入公共部分代码

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQGuP1X7-1610249381722)(C:\Users\hyy\AppData\Roaming\Typora\typora-user-images\1609918300518.png)]

    less语法转换、less文件和css文件压缩

    // 导入gulp-less
    const less = require('gulp-less');
    // 导入gulp-csso
    const csso = require('gulp-csso');
    // 创建任务
    gulp.task('cssmin', () => {
        gulp.src(['./src/css/*.less','./src/css/*.css'])
            // less语法转换
            .pipe(less())
            // css文件压缩
            .pipe(csso())
            .pipe(gulp.dest('./dist/css'))
    })
    

    JavaScript语法转化和压缩

    // 导入JavaScript语法转化gulp-babel
    const babel = require('gulp-babel');
    // 导入JavaScript压缩插件gulp-uglify
    const uglify = require('gulp-uglify');
    // 创建任务
    gulp.task('jsmin', () => {
        gulp.src('./src/js/*.js')
            // JavaScript语法转化
            .pipe(babel({
                presets: ['@babel/env']
            }))
            // JavaScript压缩
            .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
    })
    

    构建任务

    // 构建任务
    gulp.task('default', gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy', () => {}) );
    

    命令行工具中执行gulp任务: gulp default 或gulp

    展开全文
  • gulp

    2021-01-25 21:54:20
    gulp 基于node平台开发的前端构建工具,将机械化操作编写成任务,想要执行机械化操作只需要输入命令即可 Gulp的作用 项目上线 HTML CSS JS文件压缩合并 语法转换(es6,less等等) 公共文件抽离 修改文件浏览器...

    gulp

    基于node平台开发的前端构建工具,将机械化操作编写成任务,想要执行机械化操作只需要输入命令即可

    Gulp的作用

    • 项目上线 HTML CSS JS文件压缩合并
    • 语法转换(es6,less等等)
    • 公共文件抽离
    • 修改文件浏览器自动刷新

    Gulp的使用

    命令行工具:npm install gulp-cli -g

    • 使用npm install gulp下载gulp库文件
    • 在项目根目录下建立gulpfile.js文件
    • 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
    • 在gulpfile.js文件中编写任务.
    • 在命令行工具中执行gulp任务
      在这里插入图片描述

    Gulp中提供的方法

    • gulp.src():获取任务要处理的文件
    • gulp.dest():输出文件
    • gulp.task():建立gulp任务
    • gulp.watch():监控文件的变化

    在这里插入图片描述

    在这里插入图片描述

    Gulp插件

    • gulp-htmlmin :html文件压缩 npm install gulp-htmlmin
    • gulp-csso :压缩css npm install gulp-csso
    • gulp-babel :JavaScript语法转化 npm install gulp-babel @babel/core @babel/preset-env
    • gulp-less: less语法转化 npm install gulp-less
    • gulp-uglify :压缩混淆JavaScript npm install gulp-uglify
    • gulp-file-include 公共文件包含 npm install gulp-file-include
    • browsersync 浏览器实时同步
    
    //引进gulp模块
    const gulp = require('gulp');
    //引进gulp-htmlmin插件
    const htmlmin = require('gulp-htmlmin')
        //引进gulp-file.include插件
    const include = require('gulp-file-include');
    //引进gulp-less插件
    const less = require('gulp-less');
    
    //引进gulp-csso文件
    const csso = require('gulp-csso');
    //引进gulp-uglify插件
    var uglify = require('gulp-uglify');
    //引进gulp-babel插件
    const babel = require('gulp-babel');
    
    //建立gulp任务
    //1.第一个参数为任务的名字  第二个参数为任务的回调函数
    gulp.task('first', () => {
        console.log('gulp任务');
        // 获取要处理任务的路径
        gulp.src('./src/css/normalize.css')
            //将结果输出到指定的dest目录
            .pipe(gulp.dest('./dist/css'))
    })
    
    
    // 建立html任务     1.抽取html文件的公共部分  2. 压缩html文件
    gulp.task('htmlmin', () => {
    
        gulp.src('./src/*.html')
            //抽取文件的公共部分
            .pipe(include())
            // 压缩html文件
            .pipe(htmlmin({ collapseWhitespace: true }))
            .pipe(gulp.dest('dist'));
    
    })
    
    
    //建立css任务       1.将less文件转换成css文件  将css文件进行压缩
    gulp.task('cssmin', () => {
    
        //获取要处理任务的路径 多个文件可以用数组表示
        gulp.src(['./src/css/*.less', './src/css/*.css'])
            //语法转换 将less文件转换成css文件
            .pipe(less())
            //进行css文件压缩
            .pipe(csso())
            //将输出的结果输出到dist目录下的css目录
            .pipe(gulp.dest('./dist/css'))
    
    })
    
    
    
    //建立js任务         1.ES6语法转换  2.代码转换
    gulp.task('jsmin', () => {
        // 获取要处理任务的路径
        gulp.src('./src/js/*.js')
    
        //将es6的代码进行转换
        .pipe(babel({
                presets: ['@babel/env']
            }))
            //将js的代码进行压缩
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'))
    })
    
    gulp.task('copy', () => {
        console.log('gulp任务');
        // 获取要处理任务的路径
        gulp.src('./src/css/normalize.css')
            //将结果输出到指定的dest目录
            .pipe(gulp.dest('./dist/css'))
    })
    
    
    

    抽取公共文件部分的写法
    在这里插入图片描述
    在这里插入图片描述

    node-modules文件夹

    • 文件夹以及文件过多过碎,当我们将项目整体拷贝给别人的时候,,传输速度会很慢很慢.
    • 复杂的模块依赖关系需要被记录,确保模块的版本和当前保持一致,否则会导致当前项目运行报错

    package.json文件

    项目描述文件,记录当前项目信息
    例如项目名称,版本,作用,地址,githup地址,当前项目所依赖哪些第三方模块等,使用npm init -y命令生成

    在这里插入图片描述

    • name:项目的名字
    • version:版本信息
    • description:项目的描述
    • main:项目的主文件
    • scripts:命令的别名
    • author:项目的著作
    • license:项目的协议

    gulp依赖

    依赖:项目依赖 文件依赖

    项目依赖

    • 在项目的开发阶段和线上运营阶段,都需要依赖的第三方包,称为项目依赖
    • 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中

    在这里插入图片描述

    注意:npm install --production:项目所需要的依赖包

    开发依赖

    • 在项目的开发阶段需要依赖,线上运营阶段不需要依赖的第三方包,称为开发依赖
    • 使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中

    在这里插入图片描述

    package-lock.json文件的作用

    • 锁定包的版本,确保再次下载时不会因为包版本不同而产生问题
    • 加快下载速度,因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只需下载即可,不需要做额外的工作
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,955
精华内容 11,582
关键字:

gulp