码迷,mamicode.com
首页 > 其他好文 > 详细

前端自动构建工具-gulp

时间:2018-05-27 14:41:25      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:压缩js   查看   pack   -name   http   turn   browser   下载地址   16px   

前言

  现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。

 

  在gulp安装之前,必须先要有node的环境,因为gulp.js是基于node.js的。 
  所以先来安装node (如果你已经有node环境了就可以跳过此布) 
  node安装 
?   Node.js安装包及源码下载地址为https://nodejs.org/en/download/ node安装教程很多,此处不详述 
  ?安装完成之后 
?  在命令行输入

  node -v

   查看安装版本 

  npm -v

   查看npm 版本

  gulp安装 

  有了npm之后就可以执行

  

  npm install gulp -g

  就可以自如的使用gulp了

  

 接下来看下gulp的应用

??  创建一个项目

  1.监听服务器文件

    

 1 gulp.task(‘serve‘,(cb)=>{
 2     if(!args.watch) return cb();
 3     var server = liveserver.new([‘--harmony‘,‘server/bin/www‘]);
 4     server.start();
 5     gulp.watch([‘server/public/**/*.js‘,‘server/views/**/*.ejs‘],function (file) {
 6         server.notify.apply(server,[file]);
 7     })
 8     //监听需要重启的文件
 9     gulp.watch([‘server/routes/**/*.js‘,‘server/app.js‘],function () {
10         server.start.bind(server)()
11     });
12    })
13 
14 此处需要引入一些包
15 import gulp from ‘gulp‘;
16 import gulpif from ‘gulp-if‘;
17 import liveserver from ‘gulp-live-server‘;

  2.监听css文件

gulp.task(‘css‘,()=>{
    return gulp.src(‘app/**/*.css‘)
        .pipe(gulp.dest(‘server/public‘))
        .pipe(gulpif(args.watch,livereload()))
})
此处需要引入一些包
import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import livereload from ‘gulp-livereload‘;

  3.监听浏览器

import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import gutil from ‘gulp-util‘;
import args from ‘./util/args‘;

gulp.task(‘browser‘,(cb)=>{
    if(!args.watch) return cb();

    gulp.watch(‘app/**/*.js‘,[‘scripts‘]);
    gulp.watch(‘app/**/*.ejs‘,[‘pages‘]);
    gulp.watch(‘app/**/*.css‘,[‘css‘]);
});

  4.监听js

//引入一些包
import gulp from ‘gulp‘;
import gulpif from ‘gulp-if‘;
import concat from ‘gulp-concat‘;  //文件拼接
import webpack from ‘webpack‘;      //打包
import gulpWebpack from ‘webpack-stream‘;
import named from ‘vinyl-named‘;        //重命名
import livereload from ‘gulp-livereload‘;       //自动刷新  热更新
import plumber from ‘gulp-plumber‘; //处理文件信息流
import rename from ‘gulp-rename‘;       //重命名
import uglify from ‘gulp-uglify‘;       //压缩js css
import {log,colors} from ‘gulp-util‘;       //命令行输出
import args from ‘./util/args‘;         //对命令行参数进行解析


//创建一个任务
gulp.task(‘scripts‘,()=>{
    //打开
    return gulp.src([‘app/js/index.js‘])
        //处理错误
        .pipe(plumber({
            errorHandle:function () {

            }
        }))
        .pipe(named())
        .pipe(gulpWebpack({
            module:{
                loaders:[{
                    test:/\.js$/,
                    loader:‘babel-loader‘
                }]
            }
        }),null,(err,stats)=>{
        log(`Finished ‘${colors.cyan(‘scripts‘)}‘`,stats.toString({
            chunks:false
    }))
    })
        //指定路径
    .pipe(gulp.dest(‘server/public/js‘))
        //重命名
    .pipe(rename({
        basename:‘cp‘,
        extname:‘.min.js‘
    }))
        //压缩
    .pipe(uglify({compress:{properties:false},output:{‘quote_keys‘:true}}))
    .pipe(gulp.dest(‘server/public/js‘))
    .pipe(gulpif(args.watch,livereload()))

})

当然还有许多监听,此处不一一例举,但是思想则是相通的。 
对于以上的监听,有必要说明一下,在安装包时 均使用

npm install *** --save-dev 

 在安装过程中可通过package.json查看变化。

 

前端自动构建工具-gulp

标签:压缩js   查看   pack   -name   http   turn   browser   下载地址   16px   

原文地址:https://www.cnblogs.com/xinruanbaba/p/9095843.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!