gulp的使用

作者: 痛心凉 | 来源:发表于2017-09-18 08:39 被阅读13次
    gulp是一个构建工具,可以通过它自动执行网站开发过程中的公共任务,例如:编译sass/less,编译压缩混淆javaScript,合并编译模板和版本控制等。

    安装gulp

    首先,检测node.js是否存在,因为gulp的使用需要node环境。

    接着,在项目目录中安装gulp为本地模块

    本地安装gulp

    npm insstall --save-dev gulp

    最后,安装项目中依赖的 gulp plugin模块gulp-cssmin, gulp-jshint

    npm install --save-dev gulp-cssmin gulp-jshint

    使用

    首先,在根目录中创建一个gulpfile文件。然后写.....

    var gulp = require('gulp'); //加载gulp模块
    var uglifyJs = require('gulp-uglify'); //加载uglify模块
    var cleanCss = require('gulp-clean-css'); //加载clean模块
    //定义一个压缩js代码的任务
    gulp.task('uglifyJs', [], function() {
    gulp.src('build/.js') //找到原始文件
    .pipe(uglifyJs()) //压缩js代码
    .pipe(gulp.dest('js')); //压缩后的代码储存在这里
    });
    // //定义一个压缩css代码的任务
    //gulp.task('cleanCss', [], function() {
    // gulp.src('gulp/
    .css') //找到原始文件
    // .pipe(cleanCss()) //压缩css代码
    // .pipe(gulp.dest('gulp/build')); //压缩后的代码储存在这里
    //});
    // //定义一个监听任务
    gulp.task('watch', function() {
    //监听文件,一旦文件有变化,就执行相应的任务
    gulp.watch('build/.js', ['uglifyJs']);
    // gulp.watch('gulp/
    .css', ['cleanCss']);
    });
    // //默认执行的任务, 执行完数组中的任务之后,再执行当前任务
    gulp.task('default', ['uglifyJs'], function() {
    console.log('执行完毕');
    });

    相关文章

      网友评论

      • 李舒克:大哥 有地方写错了 第一行命令行
        痛心凉:npm install --global gulp 是全局安装

      本文标题:gulp的使用

      本文链接:https://www.haomeiwen.com/subject/exevsxtx.html