0
点赞
收藏
分享

微信扫一扫

Gulp及组件安装构建

一叶轻舟okok 2022-04-06 阅读 63
gulpcsshtml


Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。

Gulp安装

全局安装Gulpjs

npm install -g gulp  #全局安装

局部安装Gulpjs

npm install gulp --save-dev # 局部安装

全局安装

1. 将安装包放在 /usr/local 下

2. 可以直接在命令行里使用

本地安装

1. 将安装包放在 ./node_modules 下(运行npm时所在的目录)

2. 可以通过 require() 来引入本地安装的包

选择Gulp组件

前端项目需要的功能:

1、图片(压缩图片支持jpg、png、gif)

2、样式 (支持sass 同时支持合并、压缩、重命名)

3、javascript (检查、合并、压缩、重命名)

4、html (压缩)

5、客户端同步刷新显示修改

6、构建项目前清除发布环境下的文件(保持发布环境的清洁)

通过gulp plugins,寻找对于的gulp组件

gulp-imagemin: 压缩图片

gulp-ruby-sass: 支持sass

gulp-minify-css: 压缩css

gulp-jshint: 检查js

gulp-uglify: 压缩js

gulp-concat: 合并文件

gulp-rename: 重命名文件

gulp-htmlmin: 压缩html

gulp-clean: 清空文件夹

gulp-livereload: 服务器控制客户端同步刷新(需配合chrome插件LiveReload及tiny-lr)

安装Gulp组件

安装组件项目目录,通过cd project 进入目录,执行下边的npm安装组件。

npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

项目目录结构

project(项目名称)

|–.git 通过git管理项目会生成这个文件夹

|–node_modules 组件目录

|–dist 发布环境

    |–css 样式文件(style.css style.min.css)

    |–images 图片文件(压缩图片)

    |–js js文件(main.js main.min.js)

    |–index.html 静态文件(压缩html)

|–src 生产环境

    |–sass sass文件

    |–images 图片文件

    |–js js文件

    |–index.html 静态文件

|–.jshintrc jshint配置文件

|–gulpfile.js gulp任务文件

gulp基础语法

gulp通过gulpfile文件来完成相关任务,因此项目中必须包含gulpfile.js

gulp有五个方法:src、dest、task、run、watch

src和dest:指定源文件和处理后文件的路径

watch:用来监听文件的变化

task:指定任务

run:执行任务

编写gulp任务

/**

 * 组件安装

 * npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

 */


// 引入 gulp及组件

var gulp    = require('gulp'),                 //基础库

    imagemin = require('gulp-imagemin'),       //图片压缩

    sass = require('gulp-ruby-sass'),          //sass

    minifycss = require('gulp-minify-css'),    //css压缩

    jshint = require('gulp-jshint'),           //js检查

    uglify  = require('gulp-uglify'),          //js压缩

    rename = require('gulp-rename'),           //重命名

    concat  = require('gulp-concat'),          //合并文件

    clean = require('gulp-clean'),             //清空文件夹

    tinylr = require('tiny-lr'),               //livereload

    server = tinylr(),

    port = 35729,

    livereload = require('gulp-livereload');   //livereload


// HTML处理

gulp.task('html', function() {

    var htmlSrc = './src/*.html',

        htmlDst = './dist/';


    gulp.src(htmlSrc)

        .pipe(livereload(server))

        .pipe(gulp.dest(htmlDst))

});


// 样式处理

gulp.task('css', function () {

    var cssSrc = './src/scss/*.scss',

        cssDst = './dist/css';


    gulp.src(cssSrc)

        .pipe(sass({ style: 'expanded'}))

        .pipe(gulp.dest(cssDst))

        .pipe(rename({ suffix: '.min' }))

        .pipe(minifycss())

        .pipe(livereload(server))

        .pipe(gulp.dest(cssDst));

});


// 图片处理

gulp.task('images', function(){

    var imgSrc = './src/images/**/*',

        imgDst = './dist/images';

    gulp.src(imgSrc)

        .pipe(imagemin())

        .pipe(livereload(server))

        .pipe(gulp.dest(imgDst));

})


// js处理

gulp.task('js', function () {

    var jsSrc = './src/js/*.js',

        jsDst ='./dist/js';


    gulp.src(jsSrc)

        .pipe(jshint('.jshintrc'))

        .pipe(jshint.reporter('default'))

        .pipe(concat

举报

相关推荐

0 条评论