Grunt安装与运行及遇到的坑

最新推荐文章于 2024-05-30 15:07:12 发布

xushi123456

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量928

点赞数 3

分类专栏： grunt 文章标签：前端

本文链接：https://blog.csdn.net/xushi123456/article/details/105102500

版权

grunt 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Grunt安装环境（Windows版）

1.node.js安装教程
2.下载一个demo项目(这个项目是别人我只是借用)
3.Ruby(根据系统版本下载最新版)
4.Sass

Grunt安装步骤

.Grunt命令行（CLI）安装在全局环境下

npm install -g grunt-cli

将下载好的demo解压到D盘使用命令行进入此文件夹

cd D:\gruntxx-master\gruntxx-master

生成一个默认的package.json文件

npm init -y

这里你也可以不加-y，但是就需要自己填一些信息，比如：项目名、版本号等。

安装Grunt插件

npm install grunt --save-dev

安装Grunt其他插件

安装命令：npm install grunt-contrib-jshint --save-dev

当然你也可以一起安装你所需要的所有插件

例：npm install grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect --save-dev

在demo项目中新建一个Gruntfile.js文件

module.exports = function(grunt) {

  var sassStyle = 'expanded';
  // 任务配置代码
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      output : {
        options: {
          style: sassStyle
        },
        files: {
          './style.css': './scss/style.scss'
        }
      }
    },
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['./src/plugin.js', './src/plugin2.js'],
        dest: './global.js',
      },
    }
  });
  // 插件加载代码
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 任务注册代码
  grunt.registerTask('outputcss',['sass']);
  grunt.registerTask('concatjs',['concat']);
  grunt.registerTask('default');

};